Angular JS JS-фрейворк для разработки одностраничных приложений

Зарегистрируйтесь, чтобы просмотреть полный документ!

Angular. JS JS-фрейворк для разработки одностраничных приложений

История разработки 2009 г разработан Мишко Хевери и Адамом Абрамсом для облегчения разработки ПО, использующих сервис хранения JSON данных. Angular. JS был выпущен, как библиотека с открытым кодом.

Основы 1. <!doctype html> 2. <html ng-app> 3. <head> 4. <script src="https: //ajax. googleapis. com/ajax/libs/angularjs/1. 0. 6/angular. min. js"></script> 5. </head> 6. <body> 7. <div> 8. <label>Имя: </label> 9. <input type="text" ng-model="your. Name" placeholder="Введите свое имя"> 10. <hr> 11. <h 1>Привет {{your. Name}}!</h 1> 12. </div> 13. </body> 14. </html> 9. 12. 13

Что в Angular. JS особенного? Dependency injection (инверсия управления) в стандартной поставке Это означает что любой компонент, который не соответствует вашим потребностям, может быть легко заменен. Возможности модульного тестирования в стандартной поставке Angular. JS был спроектирован так, чтобы максимально облегчить тестирование. Он отделяет представление от поведения, уже имеет в комплекте mock'и, и по полной использует инверсию

Декларативность Директивы — это особенность, доступная только в Angular. Директивы позволяют изобретать новый HTML синтаксис, специально под конкретное приложение. Angular-директивы С помощью директив Angular. JS можно создавать пользовательские HTML-теги, чтобы добавить поведение некоторым элементам. ng-app Объявляет элемент корневым для приложения и может быть изменен с помощью пользовательских HTML-тегов. ng-bind Автоматически заменяет текст HTML-элемента на значение

ng-class Определяет классы для динамической загрузки. ng-controller Определяет Java. Script-контроллер для вычисления HTMLвыражений. ng-repeat Создает экземпляр для каждого элемента из коллекции. ng-show и ng-hide Показывает или скрывает элемент в зависимости от значения логического выражения. ng-switch Создает экземпляр шаблона из множества вариантов, в зависимости от значения выражения.

Ng-model Как и ng-bind, но обеспечивает двустороннее связывание данных между представлением и областью видимости.

Пример Index. html <!doctype html> <html ng-app> <head> <script src="https: //ajax. googleapis. com/ajax/libs/angularjs/1. 0. 6/angular. min. js"></scri pt> <script src="todo. js"></script> <link rel="stylesheet" href="todo. css"> </head> <body> <h 2>Список дел</h 2> <div ng-controller="Todo. Ctrl"> <span>Осталось {{remaining()}} из {{todos. length}}</span> [ <a href="" ng-click="archive()">архив</a> ] <ul class="unstyled"> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo. done"> <span class="done-{{todo. done}}">{{todo. text}}</span> </li> </ul>

Todo. js function Todo. Ctrl($scope) { $scope. todos = [ {text: 'learn angular', done: true}, {text: 'build an angular app', done: false}]; $scope. add. Todo = function() { $scope. todos. push({text: $scope. todo. Text, done: false}); $scope. todo. Text = ''; }; $scope. remaining = function() { var count = 0; angular. for. Each($scope. todos, function(todo) { count += todo. done ? 0 : 1; }); return count; }; $scope. archive = function() { var old. Todos = $scope. todos; $scope. todos = []; angular. for. Each(old. Todos, function(todo) { if (!todo. done) $scope. todos. push(todo); });

Связь с сервером Внешнее связывание Внешняя связь показывает в каком месте приложения находится пользователь. Валидация форм Позволяет задавать правила проверки без необходимости написания JS кода Обмен данными Angular. JS содержит сервисы высокоуроневого XHR, что существенно упрощает код.

Пример 1. <!doctype html> 2. <html ng-app="project"> 3. <head> 4. <script src="https: //ajax. googleapis. com/ajax/libs/angularjs/1. 0. 6/angular. min. js"></script> 5. <script src="https: //ajax. googleapis. com/ajax/libs/angularjs/1. 0. 6/angular-resource. min. js"> 6. </script> 7. <script src="project. js"></script> 8. <script src="mongolab. js"></script> 9. </head> 10. <body> 11. <h 2>Java. Script-проекты</h 2> 12. <div ng-view></div> 13. </body> 14. </html>

1. // Модуль для облачного хранения данных в - https: //mongolab. com 2. angular. module('mongolab', ['ng. Resource']). 3. factory('Project', function($resource) { 4. var Project = $resource('https: //api. mongolab. com/api/1/databases' + 5. '/angularjs/collections/projects/: id', 6. { api. Key: '4 f 847 ad 3 e 4 b 08 a 2 eed 5 f 3 b 54' }, { 7. update: { method: 'PUT' } 8. } 9. ); 10. 11. Project. prototype. update = function(cb) { 12. return Project. update({id: this. _id. $oid}, 13. angular. extend({}, this, {_id: undefined}), cb); 14. }; 15. 16. Project. prototype. destroy = function(cb) { 17. return Project. remove({id: this. _id. $oid}, cb); 18. }; 19. 20. return Project; 21. }); 9. 12. 13

Project. js 1. angular. module('project', ['mongolab']). 2. config(function($route. Provider) { 3. $route. Provider. 4. when('/', {controller: List. Ctrl, template. Url: 'list. html'}). 5. when('/edit/: project. Id', {controller: Edit. Ctrl, template. Url: 'detail. html'}). 6. when('/new', {controller: Create. Ctrl, template. Url: 'detail. html'}). 7. otherwise({redirect. To: '/'}); 8. }); 9. 10. 11. function List. Ctrl($scope, Project) { 12. $scope. projects = Project. query(); 13. } 14. 15. 16. function Create. Ctrl($scope, $location, Project) { 17. $scope. save = function() { 18. Project. save($scope. project, function(project) { 19. $location. path('/edit/' + project. _id. $oid); 20. }); 21. } 22. } 23. 24. 25. function Edit. Ctrl($scope, $location, $route. Params, Project) { 26. var self = this; 27. 28. Project. get({id: $route. Params. project. Id}, function(project) { 29. self. original = project; 30. $scope. project = new Project(self. original); 31. }); 32.

33. $scope. is. Clean = function() { 34. return angular. equals(self. original, $scope. project); 35. } 36. 37. $scope. destroy = function() { 38. self. original. destroy(function() { 39. $location. path('/list'); 40. }); 41. }; 42. 43. $scope. save = function() { 44. $scope. project. update(function() { 45. $location. path('/'); 46. }); 47. }; 9. 12. 13

List. html 1. <input type="text" ng-model="search" class="search-query" placeholder="Search"> 2. <table> 3. <thead> 4. <tr> 5. <th>Проект</th> 6. <th>Описание</th> 7. <th><a href="#/new"><i class="icon-plus-sign"></i></a></th> 8. </tr> 9. </thead> 10. <tbody> 11. <tr ng-repeat="project in projects | filter: search | order. By: 'name'"> 12. <td><a href="{{project. site}}" target="_blank">{{project. name}}</a></td> 13. <td>{{project. description}}</td> 14. <td> 15. <a href="#/edit/{{project. _id. $oid}}"><i class="icon-pencil"></i></a> 16. </td> 17. </tr> 18. </tbody> 19. </table> 9. 12. 13

Form. html 1. <form name="my. Form"> 2. <div class="control-group" ng-class="{error: my. Form. name. $invalid}"> 3. <label>Название</label> 4. <input type="text" name="name" ng-model="project. name" required> 5. <span ng-show="my. Form. name. $error. required" class="help-inline"> 6. не заполнено</span> 7. </div> 8. 9. <div class="control-group" ng-class="{error: my. Form. site. $invalid}"> 10. <label>Сайт</label> 11. <input type="url" name="site" ng-model="project. site" required> 12. <span ng-show="my. Form. site. $error. required" class="help-inline"> 13. не заполнено</span> 14. <span ng-show="my. Form. site. $error. url" class="help-inline"> 15. не URL</span> 16. </div> 17. 18. <label>Описание</label> 19. <textarea name="description" ng-model="project. description"></textarea> 20. 21. 22. <a href="#/" class="btn">Отмена</a> 23. <button ng-click="save()" ng-disabled="is. Clean() || my. Form. $invalid" 24. class="btn btn-primary">Сохранить</button> 25. <button ng-click="destroy()" 26. ng-show="project. _id" class="btn btn-danger">Удалить</button> 27. </form> 9. 12. 13

Скачать презентацию Angular JS JS-фрейворк для разработки одностраничных приложений

af6f901fbad18da5748f0d2954bf9344.ppt

Количество слайдов: 16