AngularJS-это высококачественная фронтальная структура разработки MVC, разработанная Google.
Официальный веб -сайт AngularJS: https://angularjs.org/ Официальный веб -сайт имеет демонстрацию, и FQ может потребоваться для доступа к нему
Angularjs Китайское сообщество: http://www.angularjs.cn/ Подходит для начинающих
Справочный файл: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
Примечания при использовании углова
Цитируйте библиотеку AngularJS: https: //github.com/litengdesign/angularjstest/blob/master/angular-1.0.1 .... Вы можете загрузить его на Github в примере в этом разделе.
Вам нужно добавить ng-app = "appname" в область, которую вы используете, или непосредственно ng-app (global).
Установите контроллер ng-controller = "ctrl".
Обратите внимание на следующие моменты при тестировании примера
Вам нужно ввести код AngularJS перед головой. Автор использует Angular-1.0.1.min.js. Пожалуйста, обратите внимание на разницу версий.
Все небольшие примеры запускаются в следующих областях, не забудьте добавить NG-APP в активную область.
Ниже приведены некоторые небольшие случаи, чтобы проиллюстрировать общие инструкции и использование по умолчанию AngularJS.
Hello World Program (двойное привязка данных)
Используйте ng-model = {{name}} для связывания данных
Кода -копия выглядит следующим образом:
<метка для = "name"> name: </label>
<input type = "text" ng-model = "name" id = "name"/>
<hr>
Привет: {{name || 'Liteng'}}
http://2.liteng.sinaapp.com/angularjstest/helloangularjs.html
Небольшой случай использования привязки событий
Кода -копия выглядит следующим образом:
<div>
Цена единицы: <input type = "номер" min = 0 ng-model = "цена" ng-init = "цена = 299">
Количество: <input type = "число" min = 0 ng-model = "Количество" ng-init = "Количество = 1">
<br>
Общая цена: {{(цена) * (количество)}}
<dt>
<dl> Примечание: </dl>
<dd> Ввод с участием html5: <a href = "http://www.w3school.com.cn/html5/att_input_type.asp"> http://www.w3school.com.cn/html5/att_inpet_type.asp </a> </dd>
<dd> ng-init: установить начальное значение </dd>
</dt>
</div>
http://2.liteng.sinaapp.com/angularjstest/event-bind.html
ng-init: значение атрибута может быть указано по умолчанию
Кода -копия выглядит следующим образом:
<p ng-init = "value = 'hello world'"> {{value}} </p>
http://2.liteng.sinaapp.com/angularjstest/ng-init.html
NG-Repeat: используется для итерации данных, аналогичных I для информации в JS
Кода -копия выглядит следующим образом:
<div ng-init = "friends = [{name: 'Jhon', возраст: 25}, {name: 'mary', возраст: 28}]"> </div>
<p> у меня есть {{riphy.length}} друзья. Они </p>
<ul>
<li ng-repeat = "друг в друзьях">
[{{$ index+1}}]: {{row.name}} возраст: {{row.age}}
</li>
</ul>
http://2.liteng.sinaapp.com/angularjstest/ng-repeat.html
ng-click: dom Нажмите на событие
Кода -копия выглядит следующим образом:
<div ng-controller = "ctrl">
<button ng-dblclick = 'showmsg ()'> {{a}} </button>
</div>
<Скрипт>
Функция ctrl ($ scope) {
$ scope.a = 'hello';
$ scope.showmsg = function () {
$ scope.a = 'world';
}
}
</script>
http://2.liteng.sinaapp.com/angularjstest/ng-click.html
NG-Show: SET ELEMTER DISPLE
ПРИМЕЧАНИЕ: ng-she-show = "! Xx": добавить перед значением атрибута! Это означает, что он обязательно отобразит, если не добавлено! Не отображается, если это неясно
Кода -копия выглядит следующим образом:
<div ng-she-show = "! Show">
ng-show = "! Показать"
</div>
<div ng-show = "show">
ng-show = "show"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-show.html
ng-hide: stet element witch
Кода -копия выглядит следующим образом:
<div ng-hide = "aaa">
ng-hide = "aaa"
</div>
<div ng-hide = "! aaa">
ng-show = "! aaa"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-hide.html
Используйте NG-SHOW для создания эффектов переключения
Кода -копия выглядит следующим образом:
<h2> переключать </h2>
<a href ng-click = "showlog =! Showlog"> Show Logo </a>
<div ng-show = "showlog">
<img ng-src = "http://liteng.org/sites/default/files/logo.png">
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-toggle.html
NG-стиль: похож на стиль по умолчанию
Обратите внимание на формат записи здесь: Строки должны быть включены в цитаты
Кода -копия выглядит следующим образом:
<div ng-style = "{ширина: 100+'px', высота: 200+'px', founalcolor: 'red'}">
коробка
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-tyle.html
Фильтр: поле фильтра
Кода -копия выглядит следующим образом:
<div> {{9999 | number}} </div> <!-9,999->
<div> {{9999+1 | номер: 2}} </div> <!-10 000,00->
<div> {{9*9 | валюта}} </div> <!-$ 81,00->
<div> {{'Hello World' | Верхишер}} </div> <!-Hello World->
http://2.liteng.sinaapp.com/angularjstest/filter.html
ng-template: можно загрузить шаблоны
Кода -копия выглядит следующим образом:
<div ng-include = "'tpl.html'"> </div>
tpl.html
Кода -копия выглядит следующим образом:
<h1> hello </h1>
http://2.liteng.sinaapp.com/angularjstest/show-tpl.html
$ http: метод, похожий на Ajax, работает очень хорошо
Кода -копия выглядит следующим образом:
<div ng-controller = "testctrl">
<h2> http-method 1 </h2>
<ul>
<li ng-repeat = "x в именах">
{{x.name}}+{{x.country}}
</li>
</ul>
</div>
<h2> Метод 2 </h2>
<div ng-controller = "testctrl2">
<ul>
<li ng-repeat = "y in info">
{{y.aid}}+{{y.title}}
</li>
</ul>
</div>
<Скрипт>
// Метод 1
var testctrl = function ($ acpope, $ http) {
var p = $ http ({
Метод: 'Get',
URL: 'json/date.json'
});
p.success (функция (ответ, состояние, заголовки, конфигурация) {
$ scope.names = ответ;
});
p.error (function (status) {
console.log (статус);
});
}
// Метод 2
Функция testctrl2 ($ accope, $ http) {
$ http.get ('json/yiqi_article.json'). Успех (функция (ответ) {
$ scope.info = ответ;
});
}
</script>
http://2.liteng.sinaapp.com/angularjstest/ajax.html
Все вышеперечисленные коды: https://github.com/litengdesign/angularjstest
Реализованная демонстрация: http://2.liteng.sinaapp.com/angularjstest/index.html
Что касается маршрутизатора и директивы AngularJS, я выведу его отдельно в следующий раз.