- Notifications
You must be signed in to change notification settings - Fork2
alaeddinejebali/AngularJS-Examples
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Initialize application params using ng-init directive
- Official Documentation of ngInit:https://docs.angularjs.org/api/ng/directive/ngInit
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Example 01</title><scripttype="text/javascript"src="js/angular.min.js"></script></head><bodyng-app=""ng-init="application = { title: 'AngularJS- Example 01', description: 'AngularJS has many advantages:', advantages: [ 'AngularJS Handles Dependencies', 'AngularJS Allows Developers to Express UI Declaratively and Reduce Side Effects', 'AngularJS Enables Massively Parallel Development', 'AngularJS Enables a Design - Development Workflow', 'AngularJS Gives Developers Controls', 'AngularJS Helps Developers Manage State', 'AngularJS Supports Single Page Applications' ] }"><h1align="center">{{application.title}}</h1><p>{{application.description}}</p><ol><ling-repeat="advantage in application.advantages">{{advantage}}</li></ol></body></html>
Initialize application params using a controller
<!-- Example-02/index.html --><!DOCTYPE html><htmllang="en"ng-app="Example_02_App"><head><metacharset="UTF-8"><title>Example 01</title><scriptsrc="js/angular.min.js"></script></head><bodyng-controller="ConfigController"><h1align="center">{{application.title}}</h1><p>{{application.description}}</p><ol><ling-repeat="advantage in application.advantages">{{advantage}}</li></ol><scriptsrc="js/app.js"></script></body></html>
#Example-02/js/app.jsvarapp=angular.module('Example_02_App',[]);app.controller('ConfigController',function($scope){$scope.application={title:'AngularJS- Example 02',description:'AngularJS has many advantages:',advantages:['AngularJS Handles Dependencies','AngularJS Allows Developers to Express UI Declaratively and Reduce Side Effects','AngularJS Enables Massively Parallel Development','AngularJS Enables a Design - Development Workflow','AngularJS Gives Developers Controls','AngularJS Helps Developers Manage State','AngularJS Supports Single Page Applications']};});
- Official Documentation:https://docs.angularjs.org/api/ng/directive/ngModel
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Example 03</title><scripttype="text/javascript"src="js/angular.min.js"></script></head><bodyng-app=""><h1align="center">Bonjour {{myFriendName}}</h1><hr/> Say Hello in French to:<inputtype="text"ng-model="myFriendName"placeholder="Friend name..."></body></html>
- Official documentation:https://docs.angularjs.org/api/ng/filter
<!DOCTYPE html><htmllang="en"ng-app="Example_04_01_App"><head><metacharset="UTF-8"><title>Example 04.01</title><scriptsrc="js/angular.min.js"></script></head><bodyng-controller="ConfigController"><h1align="center">{{application.title}}</h1><p>{{application.description}}</p><ul><ling-repeat="advantage in application.advantages | filter: 'Developers'">{{advantage.label | uppercase}}</li></ul><scriptsrc="js/app.js"></script></body></html>
varapp=angular.module('Example_04_01_App',[]);app.controller('ConfigController',function($scope){$scope.application={title:'AngularJS- Example 04.01',description:'AngularJS has many advantages:',advantages:[{id:1,label:'AngularJS Handles Dependencies'},{id:2,label:'AngularJS Allows Developers to Express UI Declaratively and Reduce Side Effects'},{id:3,label:'AngularJS Enables Massively Parallel Development'},{id:4,label:'AngularJS Enables a Design - Development Workflow'},{id:5,label:'AngularJS Gives Developers Controls'},{id:6,label:'AngularJS Helps Developers Manage State'},{id:7,label:'AngularJS Supports Single Page Applications'}]};});
<!DOCTYPE html><htmllang="en"ng-app="Example_04_02_App"><head><metacharset="UTF-8"><title>Example 04.02</title><scriptsrc="js/angular.min.js"></script></head><bodyng-controller="ConfigController"><h1align="center">{{application.title}}</h1><p>{{application.description}}</p><ul><ling-repeat="advantage in application.advantages | orderBy: id:!reverse"> {{advantage.id}}: {{advantage.label | uppercase}}</li></ul><scriptsrc="js/app.js"></script></body></html>
- Official documentation:https://docs.angularjs.org/api/ng/filter
<html><head><title>AnguleJS -Examples</title></head><bodyng-app><h1>ng-init directive</h><divng-init="programmingLanguages=['Java', 'PHP', 'C#', 'Perl', 'ASP', 'Ruby']"></div><h1>Filters</h1><h2>All items:</h2><ul><ling-repeat="programmingLanguage in programmingLanguages">{{programmingLanguage}}</li></ul><h2>All items in uppercase</h2><ul><ling-repeat="programmingLanguage in programmingLanguages">{{programmingLanguage | uppercase}}</li></ul><h2>All items which contains 'a'</h2>{{programmingLanguages | filter: 'a'}}<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script></body></html>
<html><head><title>AnguleJS -Examples</title></head><bodyng-app><h1>ng-init directive</h><divng-init="programmingLanguages=['Java', 'PHP', 'C#', 'Perl', 'ASP', 'Ruby']"></div><inputtype="text"ng-model="search"placeholder="Type to filter"/><div><ul><ling-repeat="filteredItem in programmingLanguages | filter: search">{{filteredItem | lowercase}}</li></ul></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script></body></html>
<html><head><title>AnguleJS -Examples</title></head><bodyng-app><divng-init="programmingLanguages=[{id: 1, 'content': 'Java'},{id: 2, 'content': 'PHP'},{id: 3, 'content': 'C#'},{id: 4, 'content': 'Perl'},{id: 5, 'content': 'ASP'},{id: 6, 'content': 'Ruby'}]"></div><inputtype="text"ng-model="search"placeholder="Type to filter"/><div><ul><ling-repeat="filteredItem in programmingLanguages | filter: search | orderBy: '-content'">{{filteredItem | lowercase}}</li></ul></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script></body></html>
<html><head><title>AnguleJS -Examples</title></head><bodyng-app><divng-init="programmingLanguages=[{id: 1, 'content': 'Java'},{id: 2, 'content': 'PHP'},{id: 3, 'content': 'C#'},{id: 4, 'content': 'Perl'},{id: 5, 'content': 'ASP'},{id: 6, 'content': 'Ruby'}]"></div><selectng-model="sortingKey"><optionvalue="id"selected>Sort by Id</option><optionvalue="content">Sort by Content</option></select><inputtype="text"ng-model="search"placeholder="Type to filter"/><div><ul><ling-repeat="filteredItem in programmingLanguages | filter: search | orderBy: sortingKey">{{filteredItem | lowercase}}</li></ul></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script></body></html>
<html><head><title>AnguleJS -Examples</title></head><bodyng-app><divng-init="programmingLanguages=[{id: 1, 'content': 'Java'},{id: 2, 'content': 'PHP'},{id: 3, 'content': 'C#'},{id: 4, 'content': 'Perl'},{id: 5, 'content': 'ASP'},{id: 6, 'content': 'Ruby'}]"></div><selectng-model="sortingKey"><optionvalue="id"selected>Sort by Id</option><optionvalue="content">Sort by Content</option></select><selectng-model="sortingOrder"><optionvalue="+"selected>ASC</option><optionvalue="-">DESC</option></select><inputtype="text"ng-model="search"placeholder="Type to filter"/><div><ul><ling-repeat="filteredItem in programmingLanguages | filter: search | orderBy: sortingOrder + sortingKey">{{filteredItem.content | lowercase}}</li></ul></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script></body></html>
- Byy passing $scope to the function, I tell to AngularJS that I need in my controller a scope. So AngularJS will create a new scope and inject it in the controller.
- Using [ng-controller]3, you link the view to the controller. So any changes to the data are automatically reflected in the View without the need for a manual update AND when you change the view in the controller you can access it.
<html><head><title>AnguleJS -Examples</title></head><bodyng-app><divng-controller="programmingLanguagesController"></div><selectng-model="sortingKey"><optionvalue="id"selected>Sort by Id</option><optionvalue="content">Sort by Content</option></select><selectng-model="sortingOrder"><optionvalue="+"selected>ASC</option><optionvalue="-">DESC</option></select><inputtype="text"ng-model="search"placeholder="Type to filter"/><div><ul><ling-repeat="filteredItem in programmingLanguages | filter: search | orderBy: sortingOrder + sortingKey">{{filteredItem.content | lowercase}}</li></ul></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><scripttype="text/javascript">functionprogrammingLanguagesController($scope){$scope.programmingLanguages=[{id:1,'content':'Java'},{id:2,'content':'PHP'},{id:3,'content':'C#'},{id:4,'content':'Perl'},{id:5,'content':'ASP'},{id:6,'content':'Ruby'}]}</script></body></html>
- Ala Eddine JEBALI
- Edited usinghttp://dillinger.io/
About
List of examples to understand and practice AngularJS
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Packages0
No packages published