Angular JS follows MVC pattern, it has got attention among developers due to its amazing templating system, and development practices used. MVC means model, view, controller. Views are specified using HTML and Angular JS own templating language.This framework is capable of accepting user actions, events and to find out which template to refresh. Javascript functions and objects constitute models and controllers of this framework.
Angular JS has got one important feature called, "dependency injection (DI)". This inbuilt feature enables us to develop web apps from smaller, thoroughly tested services. Well lets get started with a simple hello world program just like we begin all programming languages. Sample code is as follows:
I guess you have find the code simple, let have a break down of above code snippet.
Above is the line of code to include Angular JS library, you can eiter use CDN or download it in your local system.
If we want a HTML page to a Angular JS application we need to include "ng-app", so it can be recognized as AJS application.
ng-app="helloWorldApp"
There is also a attribute called "ng-init" for initializing model befor html gets rendered, in the above method we have used controllers a better way to do so.
ng-controller="HelloController", used for assinging controller to be used for this app.
{{ myData.message }} the double curly brackets expression is used for outputting model values.
angular.module("helloWorldApp", []): this is the way of defining module in Angular js.
Hope you find this article useful, if any queries please ask. In the next article we will be discussing about various expressions and directives in Angular JS.
Angular JS has got one important feature called, "dependency injection (DI)". This inbuilt feature enables us to develop web apps from smaller, thoroughly tested services. Well lets get started with a simple hello world program just like we begin all programming languages. Sample code is as follows:
<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body ng-app="helloWorldApp"> <div ng-controller="HelloController" > <h2>Hello {{myData.message}} !</h2> </div> <script> angular.module("helloWorldApp", []) .controller("HelloController", function($scope) { $scope.myData = {}; $scope.myData.message = "World, AngularJS"; } ); </script> </body> </html>
I guess you have find the code simple, let have a break down of above code snippet.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
Above is the line of code to include Angular JS library, you can eiter use CDN or download it in your local system.
If we want a HTML page to a Angular JS application we need to include "ng-app", so it can be recognized as AJS application.
ng-app="helloWorldApp"
There is also a attribute called "ng-init" for initializing model befor html gets rendered, in the above method we have used controllers a better way to do so.
ng-controller="HelloController", used for assinging controller to be used for this app.
{{ myData.message }} the double curly brackets expression is used for outputting model values.
angular.module("helloWorldApp", []): this is the way of defining module in Angular js.
Hope you find this article useful, if any queries please ask. In the next article we will be discussing about various expressions and directives in Angular JS.
No comments:
Post a Comment