cheatsheets/angularjs.md

---
title: Angular.js
category: JavaScript libraries
tags: [Archived]
archived: This describes an older version of Angular.
---

### About
{: .-intro}

 * <https://github.com/angular/angular-seed>
 * <https://angularjs.org/>

### ng-app

```html
    <html ng-app="nameApp">
```

### Lists (ng-repeat)
```html
    <ul ng-controller="MyListCtrl">
      <li ng-repeat="phone in phones">
        {{phone.name}}
      </li>
    </ul>
```

### Model (ng-model)

```html
    <select ng-model="orderProp">
      <option value="name">Alphabetical</option>
      <option value="age">Newest</option>
    </select>
```

### Defining a module
```js
    App = angular.module('myApp', []);

    App.controller('MyListCtrl', function ($scope) {
      $scope.phones = [ ... ];
    });
```

### Controller with protection from minification
```js
    App.controller('Name', [
      '$scope',
      '$http',
      function ($scope, $http) {
      }
    ]);

    a.c 'name', [
      '$scope'
      '$http'
      ($scope, $http) ->
    ]
```

### Service
```js
    App.service('NameService', function($http){
      return {
        get: function(){
          return $http.get(url);
        }
      }
    });
```
In controller you call with parameter and will use promises to return data from server.

```js
    App.controller('controllerName',
    function(NameService){
      NameService.get()
      .then(function(){})
    })
```

### Directive
```js
    App.directive('name', function(){
      return {
        template: '<h1>Hello</h1>'
      }
    });
```

In HTML will use `<name></name>` to render your template `<h1>Hello</h1>`

### HTTP
```js
    App.controller('PhoneListCtrl', function ($scope, $http) {
        $http.get('/data.json').success(function (data) {
            $scope.phones = data;
        })
    });
```
-												Update resolutions, git, etc.

											
										
										
											2014-09-11 14:25:43 +00:00
+								---
 								title: Angular.js
-												Updates more categories

											
										
										
											2015-11-24 05:09:17 +00:00
+								category: JavaScript libraries
-												Content formatting update (part 3) (#1967)


											
										
										
											2023-03-14 01:52:21 +00:00
+								tags: [Archived]
 								archived: This describes an older version of Angular.
-												Update resolutions, git, etc.

											
										
										
											2014-09-11 14:25:43 +00:00
+								---
-												Content formatting update (part 3) (#1967)


											
										
										
											2023-03-14 01:52:21 +00:00
 								### About
 								{: .-intro}
 								 * <https://github.com/angular/angular-seed>
 								 * <https://angularjs.org/>
 								### ng-app
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								```html
 								    <html ng-app="nameApp">
 								```
-												Update resolutions, git, etc.

											
										
										
											2014-09-11 14:25:43 +00:00
 								### Lists (ng-repeat)
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								```html
-												Update resolutions, git, etc.

											
										
										
											2014-09-11 14:25:43 +00:00
+								    <ul ng-controller="MyListCtrl">
 								      <li ng-repeat="phone in phones">
 								        {{phone.name}}
 								      </li>
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								    </ul>
 								```
-												Update resolutions, git, etc.

											
										
										
											2014-09-11 14:25:43 +00:00
 								### Model (ng-model)
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								```html
-												Update resolutions, git, etc.

											
										
										
											2014-09-11 14:25:43 +00:00
+								    <select ng-model="orderProp">
 								      <option value="name">Alphabetical</option>
 								      <option value="age">Newest</option>
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								    </select>
 								```
-												Update resolutions, git, etc.

											
										
										
											2014-09-11 14:25:43 +00:00
 								### Defining a module
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								```js
 								    App = angular.module('myApp', []);
-												Update resolutions, git, etc.

											
										
										
											2014-09-11 14:25:43 +00:00
 								    App.controller('MyListCtrl', function ($scope) {
 								      $scope.phones = [ ... ];
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								    });
 								```
-												Update resolutions, git, etc.

											
										
										
											2014-09-11 14:25:43 +00:00
 								### Controller with protection from minification
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								```js
 								    App.controller('Name', [
-												Update resolutions, git, etc.

											
										
										
											2014-09-11 14:25:43 +00:00
+								      '$scope',
 								      '$http',
 								      function ($scope, $http) {
 								      }
 								    ]);
 								    a.c 'name', [
 								      '$scope'
 								      '$http'
 								      ($scope, $http) ->
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								    ]
 								```
-												Update resolutions, git, etc.

											
										
										
											2014-09-11 14:25:43 +00:00
-												add service and directive in file angularjs.md

											
										
										
											2015-05-11 17:31:20 +00:00
+								### Service
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								```js
 								    App.service('NameService', function($http){
-												add service and directive in file angularjs.md

											
										
										
											2015-05-11 17:31:20 +00:00
+								      return {
 								        get: function(){
 								          return $http.get(url);
 								        }
 								      }
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								    });
 								```
-												add service and directive in file angularjs.md

											
										
										
											2015-05-11 17:31:20 +00:00
+								In controller you call with parameter and will use promises to return data from server.
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								```js
 								    App.controller('controllerName',
-												add service and directive in file angularjs.md

											
										
										
											2015-05-11 17:31:20 +00:00
+								    function(NameService){
 								      NameService.get()
 								      .then(function(){})
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								    })
 								```
-												add service and directive in file angularjs.md

											
										
										
											2015-05-11 17:31:20 +00:00
 								### Directive
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								```js
 								    App.directive('name', function(){
-												add service and directive in file angularjs.md

											
										
										
											2015-05-11 17:31:20 +00:00
+								      return {
-												close ul tag (ng-repeat)

											
										
										
											2015-08-13 14:12:36 +00:00
+								        template: '<h1>Hello</h1>'
-												add service and directive in file angularjs.md

											
										
										
											2015-05-11 17:31:20 +00:00
+								      }
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								    });
 								```
-												add service and directive in file angularjs.md

											
										
										
											2015-05-11 17:31:20 +00:00
-												add example

											
										
										
											2015-05-11 17:34:08 +00:00
+								In HTML will use `<name></name>` to render your template `<h1>Hello</h1>`
-												Update resolutions, git, etc.

											
										
										
											2014-09-11 14:25:43 +00:00
 								### HTTP
-												Update angularjs.md

Lint HTML & JS Code
											
										
										
											2018-02-12 23:06:00 +00:00
+								```js
 								    App.controller('PhoneListCtrl', function ($scope, $http) {
 								        $http.get('/data.json').success(function (data) {
 								            $scope.phones = data;
 								        })
 								    });
 								```