Getting Started
To use AngularJS in a web page, it must first be included using the HTML tag. This can be accomplished in one of two ways:
Method 1: Use the Google CDN
The quickest way to get started is to use a Google CDN (Content Delivery Network) URL. This way, there are no files to download or host on a server.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js">script>
The Google Hosted Libraries are a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries. A full list of the libraries hosted by the Google CDN is available on their website: https://developers.google.com/speed/libraries/
Method 2: Downloading / Hosting Locally
This method is best for those who want to work with AngularJS offline, or those who want to host the AngularJS files on their own servers.
The AngularJS code can be found at https://code.angularjs.org. Navigate to the desired directory, 1.5.5 in this case, and download the angular-1.5.5.zipfile. This .zip file contains all of the AngularJS code for that version along with documentation.
As needed, the contained JavaScript files will need to be hosted on a web server so that the HTML page can load them. Using this method, the AngularJS modules can be included as follows:
<script src="angular.min.js">script>
In addition to the core AngularJS module, there are other modules that provide additional functionality:
- angular-animate.js - Enable animation support
- angular-cookies.js - A convenient wrapper for reading and writing browser cookies
- angular-resource.js - Interaction support with RESTful services via the $resource service
- angular-route.js - Routing and deeplinking services and directives for angular apps
- angular-sanitize.js - Functionality to sanitize HTML
- angular-touch.js - Touch events and other helpers for touch-enabled devices
Note: If needed, these files should be loaded after the core angular.js file, e.g.:
<script src="angular.min.js">script>
<script src="angular-animate.min.js">script>
<script src="angular-route.min.js">script>
Regular vs. Minimized Versions
The AngularJS code is distributed in two ways, a regular version (for development) and a minimized version (for production):
- angular.js — the human-readable, non-minified version, suitable for web development
- angular.min.js — the minified version, smaller, more compact, used in a production environment
Add or remove the ".min" in the filename to switch between versions.
Simple Template
To get started using AngularJS, use the following template to write some simple examples:
<html>
<head>
<title>MyApptitle>
head>
<body ng-app="myApp">
<div ng-controller="MyController">
<h1>{{message}}h1>
div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js">script>
<script>
angular
.module("myApp", [])
.controller("MyController", function($scope) {
$scope.message = "Hello, World";
});
script>
body>
html>
As the examples get more involved, it is best to split out the application and controller code into their own JavaScript files.
AngularJS Terms
One of the difficulties with learning AngularJS is the new terms that are used. Without knowing what these terms mean from the start, it can be hard to learn how to use AngularJS.
The following table contains some of the more common AngularJS terms:
Term Description
Compiler In AngularJS, a compiler parses the template and instantiates directives and expressions
Controller A controller is the business logic behind views
Data Binding Data binding synchronizes data between the model and the view
Dependency Injection Dependency Injection creates and wires objects and functions
Directives Directives extend HTML with custom attributes and elements
Expressions Expressions access variables and functions from the scope
Filter A filter formats the value of an expression for display to the user
Injector The injector is a dependency injection container
Model The model is the data shown to the user in the view and with which the user interacts
Module A module is a container for the different parts of an app including controllers, services, filters, directives which configures the Injector
Scope The scope is the context where the model is stored so that controllers, directives and expressions can access it (this ties the view to controllers)
View The view is ultimately what the user sees
Service A service is reusable business logic which is independent of views
Template A template is HTML with additional markup
AngularJS Modules
An AngularJS module defines an "application", which is basically a container for different parts of an application. These different parts can be directives, controllers, filters, services, and configuration information.
In AngularJS, the ngApp directive is used to specify the name of the application module and is required for all AngularJS applications.
Here is a full example:
Edit in Plunker
<html>
<head>
<title>Hello Name Exampletitle>
head>
<body ng-app="myApp">
<div ng-controller="MyController">
Name: <input type="text" ng-model="name"/><br/>
<h1>Message: Hello, {{ name }}h1>
div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js">script>
<script>
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
});
script>
body>
html>
When run in the browser, this example produces the following output:
Name:
Message: Hello,
Type a name into the input field and notice that the message is updated as it is typed. This example is using an AngularJS expression along with data binding for the input control.
Note: The code for creating a module and registering a controller is more often written using "function chaining" as shown below:
angular
.module("myApp", [])
.controller("MyController", function($scope) {
// controller code here
});
Separating Modules and Controllers
In a real-world AngularJS application, it is more common to separate the markup (HTML), the main app, and the controller code into separate files. The following code shows how this would change the example above:
myApp.html
Edit in Plunker
<html>
<head>
<title>Hello Name Exampletitle>
head>
<body ng-app="myApp">
<div ng-controller="MyController">
Name: <input type="text" ng-model="name"/><br/>
<h1>Message: Hello, {{ name }}h1>
div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js">script>
<script src="myApp.js">script>
<script src="myController.js">script>
body>
html>
myApp.js
angular
.module("myApp", []);
myController.js
angular
.module("myApp");
.controller("MyController", function($scope) {
});
DEBUGGING TIP: Notice the angle brackets ("[]") in myApp.js, but none in myController.js when specifying the module. The code in myApp.js declares the module, whereas the code in myController.js references that declared module. This difference is very important. A common mistake is to specify angle brackets on both, causing angular to throw errors or not find the expected module.
tag. This can be accomplished in one of two ways:
Method 1: Use the Google CDN
The quickest way to get started is to use a Google CDN (Content Delivery Network) URL. This way, there are no files to download or host on a server.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js">script>
The Google Hosted Libraries are a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries. A full list of the libraries hosted by the Google CDN is available on their website: https://developers.google.com/speed/libraries/
Method 2: Downloading / Hosting Locally
This method is best for those who want to work with AngularJS offline, or those who want to host the AngularJS files on their own servers.
The AngularJS code can be found at https://code.angularjs.org. Navigate to the desired directory, 1.5.5 in this case, and download the angular-1.5.5.zipfile. This .zip file contains all of the AngularJS code for that version along with documentation.
As needed, the contained JavaScript files will need to be hosted on a web server so that the HTML page can load them. Using this method, the AngularJS modules can be included as follows:
<script src="angular.min.js">script>
In addition to the core AngularJS module, there are other modules that provide additional functionality:
- angular-animate.js - Enable animation support
- angular-cookies.js - A convenient wrapper for reading and writing browser cookies
- angular-resource.js - Interaction support with RESTful services via the $resource service
- angular-route.js - Routing and deeplinking services and directives for angular apps
- angular-sanitize.js - Functionality to sanitize HTML
- angular-touch.js - Touch events and other helpers for touch-enabled devices
Note: If needed, these files should be loaded after the core angular.js file, e.g.:
<script src="angular.min.js">script>
<script src="angular-animate.min.js">script>
<script src="angular-route.min.js">script>
Regular vs. Minimized Versions
The AngularJS code is distributed in two ways, a regular version (for development) and a minimized version (for production):
- angular.js — the human-readable, non-minified version, suitable for web development
- angular.min.js — the minified version, smaller, more compact, used in a production environment
Add or remove the ".min" in the filename to switch between versions.
Simple Template
To get started using AngularJS, use the following template to write some simple examples:
<html>
<head>
<title>MyApptitle>
head>
<body ng-app="myApp">
<div ng-controller="MyController">
<h1>{{message}}h1>
div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js">script>
<script>
angular
.module("myApp", [])
.controller("MyController", function($scope) {
$scope.message = "Hello, World";
});
script>
body>
html>
As the examples get more involved, it is best to split out the application and controller code into their own JavaScript files.
AngularJS Terms
One of the difficulties with learning AngularJS is the new terms that are used. Without knowing what these terms mean from the start, it can be hard to learn how to use AngularJS.
The following table contains some of the more common AngularJS terms:
| Term | Description |
|---|---|
| Compiler | In AngularJS, a compiler parses the template and instantiates directives and expressions |
| Controller | A controller is the business logic behind views |
| Data Binding | Data binding synchronizes data between the model and the view |
| Dependency Injection | Dependency Injection creates and wires objects and functions |
| Directives | Directives extend HTML with custom attributes and elements |
| Expressions | Expressions access variables and functions from the scope |
| Filter | A filter formats the value of an expression for display to the user |
| Injector | The injector is a dependency injection container |
| Model | The model is the data shown to the user in the view and with which the user interacts |
| Module | A module is a container for the different parts of an app including controllers, services, filters, directives which configures the Injector |
| Scope | The scope is the context where the model is stored so that controllers, directives and expressions can access it (this ties the view to controllers) |
| View | The view is ultimately what the user sees |
| Service | A service is reusable business logic which is independent of views |
| Template | A template is HTML with additional markup |
AngularJS Modules
An AngularJS module defines an "application", which is basically a container for different parts of an application. These different parts can be directives, controllers, filters, services, and configuration information.
In AngularJS, the ngApp directive is used to specify the name of the application module and is required for all AngularJS applications.
Here is a full example:
Edit in Plunker
<html>
<head>
<title>Hello Name Exampletitle>
head>
<body ng-app="myApp">
<div ng-controller="MyController">
Name: <input type="text" ng-model="name"/><br/>
<h1>Message: Hello, {{ name }}h1>
div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js">script>
<script>
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
});
script>
body>
html>
When run in the browser, this example produces the following output:
Message: Hello,
Type a name into the input field and notice that the message is updated as it is typed. This example is using an AngularJS expression along with data binding for the input control.
Note: The code for creating a module and registering a controller is more often written using "function chaining" as shown below:
angular
.module("myApp", [])
.controller("MyController", function($scope) {
// controller code here
});
Separating Modules and Controllers
In a real-world AngularJS application, it is more common to separate the markup (HTML), the main app, and the controller code into separate files. The following code shows how this would change the example above:
myApp.html
Edit in Plunker
<html>
<head>
<title>Hello Name Exampletitle>
head>
<body ng-app="myApp">
<div ng-controller="MyController">
Name: <input type="text" ng-model="name"/><br/>
<h1>Message: Hello, {{ name }}h1>
div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js">script>
<script src="myApp.js">script>
<script src="myController.js">script>
body>
html>
myApp.js
angular
.module("myApp", []);
myController.js
angular
.module("myApp");
.controller("MyController", function($scope) {
});
DEBUGGING TIP: Notice the angle brackets ("[]") in myApp.js, but none in myController.js when specifying the module. The code in myApp.js declares the module, whereas the code in myController.js references that declared module. This difference is very important. A common mistake is to specify angle brackets on both, causing angular to throw errors or not find the expected module.
No comments:
Post a Comment