![Modules and Controllers
angular.module(‘moduleName’,[dependencies]);
angular.module('moduleName')
.controller('controllerName', function () {
this.attributeName=”value”;
});](https://image.slidesharecdn.com/angularjs-rusljan2016-160202044721/85/Angular-JS-Basics-5-320.jpg)
![Expressions [example]
<body ng-app="blogApp">
....
<div ng-controller="BlogCtrl as blog">
<h1>{{blog.title}}</h1>
</div>
....
</body>](https://image.slidesharecdn.com/angularjs-rusljan2016-160202044721/85/Angular-JS-Basics-7-320.jpg)
![Expressions [example 2]
<body ng-app="blogApp">
....
<div ng-controller="BlogCtrl as blog">
<h1>{{blog.title}}</h1>
<input type="text" ng-model="blog.title" value="GDG"/>
</div>
....
</body>](https://image.slidesharecdn.com/angularjs-rusljan2016-160202044721/85/Angular-JS-Basics-8-320.jpg)
![Services [Example]
angular.module('blog')
.service('postService', function() {
this.getPosts=function(){
return(Json);
};
});](https://image.slidesharecdn.com/angularjs-rusljan2016-160202044721/85/Angular-JS-Basics-13-320.jpg)
Angular JS Basics.
- 1. Building Modern Web Apps with ANGULARJS
- 2. ● Node Package Manager (NPM). ○ https://nodejs.org/en/download/ ● Grunt, Yeoman, Bower ○ http://grunt.io/ ○ http://yeoman.io/ ○ http://bower.io/ ● HTML5 template. ○ http://www.initializr.com/ Tools set
- 3. ● npm install -g yo ● npm install -g bower ● npm install -g grunt-cli ● yo ● grunt serve Initializing
- 5. Modules and Controllers angular.module(‘moduleName’,[dependencies]); angular.module('moduleName') .controller('controllerName', function () { this.attributeName=”value”; });
- 7. Expressions [example] <body ng-app="blogApp"> .... <div ng-controller="BlogCtrl as blog"> <h1>{{blog.title}}</h1> </div> .... </body>
- 8. Expressions [example 2] <body ng-app="blogApp"> .... <div ng-controller="BlogCtrl as blog"> <h1>{{blog.title}}</h1> <input type="text" ng-model="blog.title" value="GDG"/> </div> .... </body>
- 9. Routes angular.config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl', controllerAs: 'main' }) .when('/about', { templateUrl: 'views/about.html', controller: 'AboutCtrl', controllerAs: 'about' }) .otherwise({ redirectTo: '/' }); });
- 10. Views and templates <body ng-app="blogApp"> .... <div class="container"> <div ng-view=""></div> </div> .... </body>
- 11. Directives ng-repeat <body ng-app="blogApp"> .... <div ng-controller="BlogCtrl as blog"> <h1 ng-repeat="posts as post">{{post.title}}</h1> </div> .... </body>
- 12. Services angular.module('moduleName') .service('serviceName', function() { this.functionName=function(text){ return "Hello"; }; });
- 13. Services [Example] angular.module('blog') .service('postService', function() { this.getPosts=function(){ return(Json); }; });