What is AngularJS?
AngularJS is a JavaScript framework that extends HTML tags to help you create dynamic web applications. It simplifies development by giving the developer a high level of abstraction. With that being said, AngularJS is not always a good fit for every application. It was built to work with CRUD (Create, Read, Update, Delete) applications.
Getting Started
First you will need to download the AngularJS file from https://angularjs.org/and add the reference below in your application:
<script src="~/Script/angular.min.js"></script>
If you do not want to download the file, you can use a CDN for the reference instead:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
Directives
Directives are markers placed on DOM elements to tell the complier to add specified behaviors to the element and/or its children. AngularJS comes with some basic built-in directives. You can also create your own (which we won’t go over in this blog posting).
ng-app – this directive is used at the root of the application and AngularJS can only be used after this tag.
ng-init – used to initialize data of our application.
ng-model – binds the values of HTML Controls to the application data.
ng-repeat – used for iterating through a collection or an array and clones the HTML elements on each iteration.
ng-bind – replaces the text content of the HTML element with the value of an expression.
What are Controllers?
In AngularJS, controllers are JavaScript objects that are used to control the data of our application. The directive for controllers is ‘ng-controller.’
In the example above I used the ‘ng-app’ directive to reference a module created in JavaScript, which is a container for different parts of the application. Read more about modules here: https://docs.angularjs.org/guide/module.
With the module, I created a controller called ‘myController’ and you will notice the $scope variable that the controller is using. Every controller must have its own scope object. With the scope object you can add behaviors or properties that can be used in the view. For example, I added the calcTotal property which returns the wage * hours worked.
This covers the very basics of AngularJS. Check back soon for more in-depth topics about AngularJS. If you wish to learn more, please read over the developers guide and tutorials here: https://angularjs.org/.
