В первой , второй и третьей части серии мы сосредоточились на различных аспектах AngularJS, таких как директивы, контроллеры, область действия и функции двусторонней привязки данных. В этой последней части серии мы узнаем, как интегрировать директивы AngularJS на основе разметки Twitter Bootstrap и CSS из пользовательского интерфейса Bootstrap .
Начальная загрузка приложения
Для начала давайте дадим нашему приложению ясный вид, используя Twitter Bootstrap Мы будем использовать стартовый шаблон . Вот стартовый шаблон html, назовем его bootstrap_index.html .
<html lang="en"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="description" content=""/> <meta name="author" content=""/> <title>Starter Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"/> <!-- Custom styles for this template --> <link href="css/starter-template.css" rel="stylesheet"/> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#about">About</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> <!--/.nav-collapse --> </div> </div> <div class="container"> <div class="starter-template"> <h1>Visualization App Using AngularJS</h1> <hr /> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="lib/common/bootstrap.min.js"></script> </body> </html>
Поместите его в тот же каталог, что и index.html . Также обязательно скопируйте файлы bootstrap.min.css , starter_template.css и bootstrap.min.js в соответствующие папки.
С терминала введите:
node scripts/web-server.js
Затем укажите в браузере http://localhost:5000/app/bootstrap_index.html . Вы должны увидеть стартовый шаблон.
Начальная вкладка
Теперь мы добавим директиву Tab из AngularJS Bootstrap . Сначала добавьте модуль ui.bootstrap в наше приложение. Откройте app/js/app.js и добавьте модуль ui.bootstrap . Вот модифицированный app.js :
'use strict'; // Declare app level module which depends on filters, and services angular.module('myApp', [ 'ngRoute', 'myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'ui.bootstrap' ]). config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/', { templateUrl: 'index.html', controller: 'MyCtrl1' }); $routeProvider.otherwise({ redirectTo: '/view1' }); } ]);
Загрузите ui-bootstrap-tpls-0.10.0.js из пользовательского интерфейса Bootstrap и ui-bootstrap-tpls-0.10.0.js его в bootstrap_index.html . Также включите все скрипты, которые мы включили в index.html в bootstrap_index.html . Чтобы добавить вкладку, просто добавьте следующий код в bootstrap_index.html
<div> <tabset> <tab heading="Welcome"> <h4>AngularJS Data Visualization App</h4> </tab> <tab heading="Visualization">Data Visualization</tab> </tabset> </div>
Вот как выглядит модифицированный bootstrap_index.html :
<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Starter Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="css/starter-template.css" rel="stylesheet"> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#about">About</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> <!--/.nav-collapse --> </div> </div> <div class="container"> <div class="starter-template"> <h1>Visualization App Using AngularJS</h1> <hr/> </div> <div> <tabset> <tab heading="Welcome"> <h4>AngularJS Data Visualization App</h4> </tab> <tab heading="Visualization">Data Visualization</tab> </tabset> </div> </div> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="lib/common/bootstrap.min.js"></script> <script src="lib/angular/angular.js"></script> <script src="lib/common/ui-bootstrap-tpls-0.10.0.js"></script> <script src="lib/angular/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script> <script src="js/filters.js"></script> <script src="js/directives.js"></script> </body> </html>
Перезапустите сервер узла и укажите браузеру http://localhost:5000/app/bootstrap_index.html чтобы увидеть вкладку начальной загрузки.
Далее мы интегрируем наш index.html во вторую вкладку bootstrap_index.html . Из index.html скопируйте код внутри тела, добавив контейнер div . Это должно выглядеть так:
<div ng-controller="MyCtrl1"> <div g-chart></div> <select id="chartType" ng-change="selectType(chartType)" ng-model="chartType" ng-options="c.typeName for c in chartTypes"> </select> <div>Angular seed app: v<span app-version></span> </div> </div>
Как вы можете видеть, есть дополнительный div который используется для определения логики контроллера для этой части. В bootstrap_index.html вставьте это в:
<tab heading="Visualization">Data Visualization</tab>
Теперь это должно выглядеть так:
<tab heading="Visualization"> <div ng-controller="MyCtrl1"> <div g-chart></div> <select id="chartType" ng-change="selectType(chartType)" ng-model="chartType" ng-options="c.typeName for c in chartTypes"> </select> <div>Angular seed app: v<span app-version></span> </div> </div> </tab>
После перезапуска сервера узла укажите браузеру http://localhost:5000/app/bootstrap_index.html . Вы должны увидеть часть визуализации данных на вкладке визуализации.
Bootstrap Dropdown
До сих пор мы использовали раскрывающийся список HTML для выбора типа диаграммы. Давайте также загрузим выпадающий список. Замените существующий элемент управления select следующим HTML-кодом:
<li class="dropdown"> <a class="dropdown-toggle"> Change Chart Type </a> <ul class="dropdown-menu"> <li ng-repeat="type in chartTypes"> <a>{{type.typeName}}</a> </li> </ul> </li>
Перезагрузите сервер, обновите браузер, и вместо выпадающего списка вы увидите заголовок ссылки «Изменить тип диаграммы». Если вы нажмете на него, он превратится в красивый выпадающий список. Но это не полностью функционально. Итак, давайте сделаем это функциональным.
Во-первых, нам нужно настроить отображение типа диаграммы по умолчанию вместо изменения типа диаграммы. Откройте app/js/controllers.js и объявите еще одну переменную с именем chart.typeName в контроллере MyCtrl1 .
chart.typeName = $scope.chartTypes[0].typeName;
Затем установите его значение в функции selectType как показано ниже.
$scope.selectType = function (type) { $scope.chart.type = type.typeValue; $scope.chart.typeName = type.typeName; }
Затем измените раскрывающийся HTML-код, как показано ниже.
<li class="dropdown"> <a class="dropdown-toggle"> {{chart.typeName}} </a> <ul class="dropdown-menu"> <li ng-repeat="type in chartTypes"> <a ng-click="selectType(type)">{{type.typeName}}</a> </li> </ul> </li>
Теперь выбор типа диаграммы из выпадающего меню на вкладке визуализации приведет к изменению диаграммы.
Вывод
В этом руководстве мы сосредоточились на использовании двух директив AngularJS, созданных командой AngularUI, в нашем приложении Angular. Вы можете попробовать другие директивы здесь . Тем временем, демонстрационный код доступен на GitHub . Живая демоверсия также размещена на Heroku .