- We are currently using Angular 1.6.
- Angular 2 is NOT backwards compatible.
- Google is supporting Angular 1 & 2 in parallel
Angular | Angular
--------------------
1.0 | 2
1.1 | 3
1.2 | 4 <- Beta
1.3 |
1.4 |
1.5 |
1.6 |
npm install angular --save- Copy
angular.jsinto the root directory
Directives
Directives are subsets of functionality we put into our elements.
First, create an index.html file.
<!DOCTYPE html>
<!-- Most basic Angular app -->
<html ng-app="myApp"> <!-- Angular has full control over the page -->
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="client.js"></script>
</head>
<body>
<!-- 2 Way Binding Example -->
<!-- Similar to... var intro = what you type -->
<input type="text" ng-model="intro">
<!-- intro is an expression, could be {{intro + " meow"}} or {{ 7 + 2 }} -->
<p>{{intro}}</p>
</body>
</html>ng-appCentralized implementation wrapping the entire experienceng-model
Now let's create a new file client.js and source it in.
// First param links to <html ng-app="myApp">
// [] is the dependency injection array, what services do we need?
var myApp = angular.module('myApp', []); // Leave array empty for now
// Configure the app by creating a controller
myApp.controller('BaseController', ['$scope', function($scope){
// $scope is the scope of this function but it's special. It allows
// us to create variables that are data bound to the section of the
// controller that it exists.
$scope.hello = 'Hello World';
}]);
// Scope the controller to a set of elementsUpdate the HTML
<div ng-controller="BaseController">
<p>{{hello}}</p>
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent