AngularJS Tutorial W3SCHOOLS - Xaeyr's Blog

3y ago
167 Views
4 Downloads
394.93 KB
43 Pages
Last View : 5d ago
Last Download : 3m ago
Upload by : Kaden Thurman
Transcription

AngularJS TutorialW3SCHOOLS.comAngularJS extends HTML with new attributes.AngularJS is perfect for Single Page Applications (SPAs).AngularJS is easy to learn.This TutorialThis tutorial is specially designed to help you learn AngularJS as quickly and efficiently as possible.First, you will learn the basics of AngularJS: directives, expressions, filters, modules, and controllers.Then you will learn everything else you need to know about AngularJS:Events, DOM, Forms, Input, Validation, Http, and more.Try it Yourself Examples in Every ChapterIn every chapter, you can edit the examples online, and click on a button to view the result.AngularJS Example !DOCTYPE html html lang "en-US" script src 3.14/angular.min.js" /script body div ng-app "" p Name : input type "text" ng-model "name" /p h1 Hello {{name}} /h1 /div /body /html 1

What You Should Already KnowBefore you study AngularJS, you should have a basic understanding of: HTMLCSSJavaScriptAngularJS HistoryAngularJS version 1.0 was released in 2012.Miško Hevery, a Google employee, started to work with AngularJS in 2009.The idea turned out very well, and the project is now officially supported by Google.AngularJS is a JavaScript framework. It can be added to an HTML page with a script tag.AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.AngularJS is a JavaScript FrameworkAngularJS is a JavaScript framework. It is a library written in JavaScript.AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag: script src 3.14/angular.min.js" /script AngularJS Extends HTMLAngularJS extends HTML with ng-directives.The ng-app directive defines an AngularJS application.The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.The ng-bind directive binds application data to the HTML view.AngularJS Example !DOCTYPE html html script src 3.14/angular.min.js" /script body div ng-app "" p Name: input type "text" ng-model "name" /p p ng-bind "name" /p /div /body /html 2

Example explained:AngularJS starts automatically when the web page has loaded.The ng-app directive tells AngularJS that the div element is the "owner" of an AngularJSapplication.The ng-model directive binds the value of the input field to the application variable name.The ng-bind directive binds the innerHTML of the p element to the application variable name.AngularJS DirectivesAs you have already seen, AngularJS directives are HTML attributes with an ng prefix.The ng-init directive initialize AngularJS application variables.AngularJS Example div ng-app "" ng-init "firstName 'John'" p The name is span ng-bind "firstName" /span /p /div Alternatively with valid HTML:AngularJS Example div data-ng-app "" data-ng-init "firstName 'John'" p The name is span data-ng-bind "firstName" /span /p /div You can use data-ng-, instead of ng-, if you want to make your page HTML valid.You will learn a lot more about directives later in this tutorial.AngularJS ExpressionsAngularJS expressions are written inside double braces: {{ expression }}.AngularJS will "output" data exactly where the expression is written:AngularJS Example !DOCTYPE html html script src 3.14/angular.min.js" /script body div ng-app "" p My first expression: {{ 5 5 }} /p 3

/div /body /html AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.AngularJS Example !DOCTYPE html html script src 3.14/angular.min.js" /script body div ng-app "" p Name: input type "text" ng-model "name" /p p {{name}} /p /div /body /html You will learn more about expressions later in this tutorial.AngularJS ApplicationsAngularJS modules define AngularJS applications.AngularJS controllers control AngularJS applications.The ng-app directive defines the application, the ng-controller directive defines the controller.AngularJS Example div ng-app "myApp" ng-controller "myCtrl" First Name: input type "text" ng-model "firstName" br Last Name: input type "text" ng-model "lastName" br br Full Name: {{firstName " " lastName}} /div script var app angular.module('myApp', []);app.controller('myCtrl', function( scope) { scope.firstName "John"; scope.lastName "Doe";}); /script AngularJS modules define applications:AngularJS Modulevar app angular.module('myApp', []);4

AngularJS controllers control applications:AngularJS Controllerapp.controller('myCtrl', function( scope) { scope.firstName "John"; scope.lastName "Doe";});You will learn more about modules and controllers later in this tutorial.AngularJS ExpressionsAngularJS binds data to HTML using Expressions.AngularJS ExpressionsAngularJS expressions are written inside double braces: {{ expression }}.AngularJS expressions binds data to HTML the same way as the ng-bind directive.AngularJS will "output" data exactly where the expression is written.AngularJS expressions are much like JavaScript expressions: They can contain literals, operators,and variables.Example {{ 5 5 }} or {{ firstName " " lastName }}AngularJS Example !DOCTYPE html html script src 3.14/angular.min.js" /script body div ng-app "" p My first expression: {{ 5 5 }} /p /div /body /html If you remove the ng-app directive, HTML will display the expression as it is, without solving it:AngularJS Example !DOCTYPE html html script src 3.14/angular.min.js" /script body div p My first expression: {{ 5 5 }} /p /div /body /html 5

AngularJS NumbersAngularJS numbers are like JavaScript numbers:AngularJS Example div ng-app "" ng-init "quantity 1;cost 5" p Total in dollar: {{ quantity * cost }} /p /div Same example using ng-bind:AngularJS Example div ng-app "" ng-init "quantity 1;cost 5" p Total in dollar: span ng-bind "quantity * cost" /span /p /div Using ng-init is not very common. You will learn a better way to initialize data in the chapterabout controllers.AngularJS StringsAngularJS strings are like JavaScript strings:AngularJS Example div ng-app "" ng-init "firstName 'John';lastName 'Doe'" p The name is {{ firstName " " lastName }} /p /div Same example using ng-bind:AngularJS Example div ng-app "" ng-init "firstName 'John';lastName 'Doe'" p The name is span ng-bind "firstName ' ' lastName" /span /p /div AngularJS ObjectsAngularJS objects are like JavaScript objects:AngularJS Example div ng-app "" ng-init "person {firstName:'John',lastName:'Doe'}" p The name is {{ person.lastName }} /p 6

/div Same example using ng-bind:AngularJS Example div ng-app "" ng-init "person {firstName:'John',lastName:'Doe'}" p The name is span ng-bind "person.lastName" /span /p /div AngularJS ArraysAngularJS arrays are like JavaScript arrays:AngularJS Example div ng-app "" ng-init "points [1,15,19,2,40]" p The third result is {{ points[2] }} /p /div Same example using ng-bind:AngularJS Example div ng-app "" ng-init "points [1,15,19,2,40]" p The third result is span ng-bind "points[2]" /span /p /div AngularJS Expressions vs. JavaScript ExpressionsLike JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScriptexpressions do.AngularJS DirectivesAngularJS lets you extend HTML with new attributes called Directives.AngularJS DirectivesAngularJS directives are extended HTML attributes with the prefix ng-.The ng-app directive initializes an AngularJS application.The ng-init directive initializes application data.7

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.AngularJS Example div ng-app "" ng-init "firstName 'John'" p Name: input type "text" ng-model "firstName" /p p You wrote: {{ firstName }} /p /div The ng-app directive also tells AngularJS that the div element is the "owner" of the AngularJSapplication.Data BindingThe {{ firstName }} expression, in the example above, is an AngularJS data binding expression.Data binding in AngularJS synchronizes AngularJS expressions with AngularJS data.{{ firstName }} is synchronized with ng-model "firstName".In the next example two text fields are synchronized with two ng-model directives:AngularJS Example div ng-app "" ng-init "quantity 1;price 5" Quantity: input type "number" ng-model "quantity" Costs: input type "number" ng-model "price" Total in dollar: {{ quantity * price }} /div Using ng-init is not very common. You will learn how to initialize data in the chapter aboutcontrollers.Repeating HTML ElementsThe ng-repeat directive repeats an HTML element:AngularJS Example div ng-app "" ng-init "names ['Jani','Hege','Kai']" ul li ng-repeat "x in names" {{ x }} /li /ul /div The ng-repeat directive used on an array of objects:AngularJS Example8

div ng-app "" ng-init "names ry:'Sweden'},{name:'Kai',country:'Denmark'}]" ul li ng-repeat "x in names" {{ x.name ', ' x.country }} /li /ul /div AngularJS is perfect for database CRUD (Create Read Update Delete) applications.Just imagine if these objects were records from a database.The ng-app DirectiveThe ng-app directive defines the root element of an AngularJS application.The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page isloaded.Later you will learn how ng-app can have a value (like ng-app "myModule"), to connect codemodules.The ng-init DirectiveThe ng-init directive defines initial values for an AngularJS application.Normally, you will not use ng-init. You will use a controller or module instead.You will learn more about controllers and modules later.The ng-model DirectiveThe ng-model directive binds the value of HTML controls (input, select, textarea) to application data.The ng-model directive can also: Provide type validation for application data (number, email, required).Provide status for application data (invalid, dirty, touched, error).Provide CSS classes for HTML elements.Bind HTML elements to HTML forms.The ng-repeat DirectiveThe ng-repeat directive clones HTML elements once for each item in a collection (in an array).AngularJS ControllersAngularJS controllers control the data of AngularJS applications.9

AngularJS controllers are regular JavaScript Objects.AngularJS ControllersAngularJS applications are controlled by controllers.The ng-controller directive defines the application controller.A controller is a JavaScript Object, created by a standard JavaScript object constructor.AngularJS Example div ng-app "myApp" ng-controller "myCtrl" First Name: input type "text" ng-model "firstName" br Last Name: input type "text" ng-model "lastName" br br Full Name: {{firstName " " lastName}} /div script var app angular.module('myApp', []);app.controller('myCtrl', function( scope) { scope.firstName "John"; scope.lastName "Doe";}); /script Application explained:The AngularJS application is defined by ng-app "myApp". The application runs inside the div .The ng-controller "myCtrl" attribute is an AngularJS directive. It defines a controller.The myCtrl function is a JavaScript function.AngularJS will invoke the controller with a scope object.In AngularJS, scope is the application object (the owner of application variables and functions).The controller creates two properties (variables) in the scope (firstName and lastName).The ng-model directives bind the input fields to the controller properties (firstName and lastName).Controller MethodsThe example above demonstrated a controller object with two properties: lastName and firstName.A controller can also have methods (variables as functions):AngularJS Example div ng-app "myApp" ng-controller "personCtrl" First Name: input type "text" ng-model "firstName" br 10

Last Name: input type "text" ng-model "lastName" br br Full Name: {{fullName()}} /div script var app angular.module('myApp', []);app.controller('personCtrl', function( scope) { scope.firstName "John"; scope.lastName "Doe"; scope.fullName function() {return scope.firstName " " scope.lastName;};}); /script Controllers In External FilesIn larger applications, it is common to store controllers in external files.Just copy the code between the script tags into an external file named personController.js:AngularJS Example div ng-app "myApp" ng-controller "personCtrl" First Name: input type "text" ng-model "firstName" br Last Name: input type "text" ng-model "lastName" br br Full Name: {{firstName " " lastName}} /div script src "personController.js" /script Another ExampleFor the next example we will create a new controller file:angular.module('myApp', []).controller('namesCtrl', function( scope) { scope.names ve the file as namesController.js:And then use the controller file in an application:AngularJS Example div ng-app "myApp" ng-controller "namesCtrl" ul li ng-repeat "x in names" 11

{{ x.name ', ' x.country }} /li /ul /div script src "namesController.js" /script AngularJS FiltersFilters can be added to expressions and directives using a pipe character.AngularJS FiltersAngularJS filters can be used to transform DescriptionFormat a number to a currency format.Select a subset of items from an array.Format a string to lower case.Orders an array by an expression.Format a string to upper case.Adding Filters to ExpressionsA filter can be added to an expression with a pipe character ( ) and a filter.(For the next two examples we will use the person controller from the previous chapter)The uppercase filter format strings to upper case:AngularJS Example div ng-app "myApp" ng-controller "personCtrl" p The name is {{ lastName uppercase }} /p /div The lowercase filter format strings to lower case:AngularJS Example div ng-app "myApp" ng-controller "personCtrl" p The name is {{ lastName lowercase }} /p /div The currency FilterThe currency filter formats a number as currency:AngularJS Example12

div ng-app "myApp" ng-controller "costCtrl" input type "number" ng-model "quantity" input type "number" ng-model "price" p Total {{ (quantity * price) currency }} /p /div Adding Filters to DirectivesA filter can be added to a directive with a pipe character ( ) and a filter.The orderBy filter orders an array by an expression:AngularJS Example div ng-app "myApp" ng-controller "namesCtrl" ul li ng-repeat "x in names orderBy:'country'" {{ x.name ', ' x.country }} /li /ul div Filtering InputAn input filter can be added to a directive with a pipe character ( ) and filter followed by a colon and amodel name.The filter filter selects a subset of an array:AngularJS Example div ng-app "myApp" ng-controller "namesCtrl" p input type "text" ng-model "test" /p ul li ng-repeat "x in names filter:test orderBy:'country'" {{ (x.name uppercase) ', ' x.country }} /li /ul /div AngularJS AJAX - http http is an AngularJS service for reading data from remote servers.Providing DataThe following data can be provided by a web php13

{"records": [{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbköp","City" : "Luleå","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "México D.F.","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"},{"Name" : "FISSA Fabrica Inter. Salchichas S.A.","City" : "Madrid","Country" : "Spain"},{"Name" : "Galería del gastrónomo","City" : "Barcelona","Country" : "Spain"},{"Name" : "Island Trading","City" : "Cowes","Country" : "UK"},{"Name" : "Königlich Essen","City" : "Brandenburg","Country" : "Germany"},{"Name" : "Laughing Bacchus Wine Cellars","City" : "Vancouver","Country" : "Canada"},{"Name" : "Magazzini Alimentari Riuniti","City" : "Bergamo","Country" : "Italy"},{"Name" : "North/South","City" : "London","Country" : "UK"},{"Name" : "Paris spécialités","City" : "Paris",14

"Country" : "France"},{"Name" : "Rattlesnake Canyon Grocery","City" : "Albuquerque","Country" : "USA"},{"Name" : "Simons bistro","City" : "København","Country" : "Denmark"},{"Name" : "The Big Cheese","City" : "Portland","Country" : "USA"},{"Name" : "Vaffeljernet","City" : "Århus","Country" : "Denmark"},{"Name" : "Wolski Zajazd","City" : "Warszawa","Country" : "Poland"}]}AngularJS httpAngularJS http is a core service for reading data from web servers. http.get(url) is the function to use for reading server data.AngularJS Example div ng-app "myApp" ng-controller "customersCtrl" ul li ng-repeat "x in names" {{ x.Name ', ' x.Country }} /li /ul /div script var app angular.module('myApp', []);app.controller('customersCtrl', function( scope, http) { rs.php").success(function(response) { scope.names response.records;});}); /script Application explained:The AngularJS application is defined by ng-app. The application runs inside a div .15

The ng-controller directive names the controller object.The customersCtrl function is a standard JavaScript object constructor.AngularJS will invoke customersCtrl with a scope and http object. scope is the application object (the owner of application variables and functions). http is an XMLHttpRequest object for requesting external data. http.get() reads JSON data from http://www.w3schools.com/angular/customers.php.If success, the controller creates a property (names) in the scope, with JSON data from the server.ngularJS TablesThe ng-repeat directive is perfect for displaying tables.Displaying Data in a TableDisplaying tables with angular is very simple:AngularJS Example div ng-app "myApp" ng-controller "customersCtrl" table tr ng-repeat "x in names" td {{ x.Name }} /td td {{ x.Country }} /td /tr /table /div script var app angular.module('myApp', []);app.controller('customersCtrl', function( scope, http) { rs.php").success(function (response) { scope.names response.records;});}); /script Displaying with CSS StyleTo make it nice, add some CSS to the page:CSS Style style table, th , td {border: 1px solid grey;border-collapse: collapse;padding: 5px;}table tr:nth-child(odd) {background-color: #f1f1f1;16

}table tr:nth-child(even) {background-color: #ffffff;} /style Display with orderBy FilterTo sort the table, add an orderBy filter:AngularJS Example table tr ng-repeat "x in names orderBy : 'Country'" td {{ x.Name }} /td td {{ x.Country }} /td /tr /table Display with uppercase FilterTo display uppercase, add an uppercase filter:AngularJS Example table tr ng-repeat "x in names" td {{ x.Name }} /td td {{ x.Country uppercase }} /td /tr /table Display the Table Index ( index)To display the table index, add a td with index:AngularJS Example table tr ng-repeat "x in names" td {{ index 1 }} /td td {{ x.Name }} /td td {{ x.Country }} /td /tr /table Using even and oddAngularJS Example table tr ng-repeat "x in names" td ng-if " odd" style "background-color:#f1f1f1" {{ x.Name }} /td td ng-if " even" {{ x.Name }} /td td ng-if " odd" style "background-color:#f1f1f1" {{ x.Country }} /td td ng-if " even" {{ x.Country }} /td 17

/tr /table AngularJS SQLThe code from the previous chapter can also be used to read from databases.Fetching Data From a PHP Serv

AngularJS Tutorial W3SCHOOLS.com AngularJS extends HTML with new attributes. AngularJS is perfect for Single Page Applications (SPAs). AngularJS is easy to learn. This Tutorial This tutorial is specially designed to help you learn AngularJS as quickly and efficiently as possible. First, you will learn the basics of AngularJS: directives, expressions, filters, modules, and controllers. Then you .

Related Documents:

AngularJS uses dependency injection and make use of separation of concerns. AngularJS provides reusable components. AngularJS viii With AngularJS, the developers can achieve more functionality with short code. In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing. On the top of everything, AngularJS applications can run on all major browsers .

Beginning AngularJS Beginning AngularJS is your step-by-step guide to learning the powerful AngularJS JavaScript framework. AngularJS is one of the most respected and innovative frameworks for building properly structured, easy-to-develop web applications. This book will teach you the absolute essentials, from downloading and installing AngularJS, to using modules, controllers, expressions .

AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience AngularJS code is unit testable. AngularJS uses dependency injection and make use of separation of concerns. AngularJS provides reusable components. With AngularJS,

AngularJS Tutorial, AngularJS Example pdf, AngularJS, AngularJS Example, angular ajax example, angular filter example, angular controller Created Date 11/29/2015 3:37:05 AM

AngularJS team at Google as an external contractor and is a founder member of the AngularUI project. He has spoken about AngularJS at Devoxx UK and numerous London meetups. He also runs training courses in AngularJS. His consultancy practice is now primarily focused on helping businesses make best use of AngularJS. I would like to thank the team at Google for giving us AngularJS, in particular .

Code Explanation for ng-transclude Directive in AngularJS: 1. The ng-app specifies the root element ( myApp ) to define AngularJS . ng-transclude directive is used to include the existing content "AngularJS" . Sample Output for ng-transclude Directive in AngularJS: 1. The content welcome to wikitechy is displayed in the output using the .

AngularJS is a JavaScript framework. It is a library written in JavaScript. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag: [3] AngularJS extends HTML with ng-directives. The ng-app directive defines that this is an AngularJS application.

2013 AMC 8 Problems Problem 1 Amma wants to arrange her model cars in rows with exactly 6 cars in each row. She now has 23 model cars. What is the smallest number of additional cars she must buy in order to be able to arrange all her cars this way? Solution Problem 2 A sign at the fish market says, "50% off, today only: half-pound packages for just 3 per package." What is the regular price .