AngularJS基礎(chǔ)知識(shí)
angularJS定義和特點(diǎn)
1.google前端開源框架
2.MVVM(model view view-model)設(shè)計(jì)模式 : Model將和ViewModel互動(dòng)（通過$scope對(duì)象），將監(jiān)聽Model的變化。這些可以通過View來發(fā)送和渲染，由HTML來展示你的代碼
3.方便的REST
4.數(shù)據(jù)綁定和依賴注入
5.可以操作XML一樣操作HTML,AngularJS通過自己的編譯器和directives來完成相關(guān)的設(shè)置
6.模板被作為DOM元素傳遞到Angular的編譯器
7.AngularJS 通過 指令 擴(kuò)展了 HTML，且通過 表達(dá)式 綁定數(shù)據(jù)到 HTML。
構(gòu)建angularJS應(yīng)用
添加Angular的<script>標(biāo)簽到<head>標(biāo)簽里
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
添加ng-app directive到<body>標(biāo)簽
<body
ng-app="guetonline"
ng-controller="MainController"
>
新建目錄script和app.js文件，在app.js中定義和配置所有模塊和依賴
var app = angular.module('guetonline', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);
在模塊app中定義控制器、服務(wù)、指令
app.controller( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) //控制器
app.service( 'MainSevicel', function() {} ) //服務(wù)
app.directive( 'dragToDismiss', function() {} ) //指令
在模塊app中定義路由
app.config(function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'index/home', reloadOnSearch: false});
$routeProvider.when('/scroll', {templateUrl: 'scroll.html', reloadOnSearch: false});
$routeProvider.when('/toggle', {templateUrl: 'toggle.html', reloadOnSearch: false});
$routeProvider.when('/tabs', {templateUrl: 'tabs.html', reloadOnSearch: false});
$routeProvider.when('/accordion', {templateUrl: 'accordion.html', reloadOnSearch: false});
$routeProvider.when('/overlay', {templateUrl: 'overlay.html', reloadOnSearch: false});
$routeProvider.when('/forms', {templateUrl: 'forms.html', reloadOnSearch: false});
$routeProvider.when('/dropdown', {templateUrl: 'dropdown.html', reloadOnSearch: false});
$routeProvider.when('/drag', {templateUrl: 'drag.html', reloadOnSearch: false});
$routeProvider.when('/carousel', {templateUrl: 'carousel.html', reloadOnSearch: false});
$routeProvider.when('/news/official_view', {templateUrl: '/news/official_view', reloadOnSearch: false});
});
待續(xù)。。下一步深入學(xué)習(xí)4.5兩步，還有過濾器
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了angular4實(shí)現(xiàn)帶搜索的下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了使用Angular-CLI構(gòu)建NPM包的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于Angular8路由守衛(wèi)原理和使用方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angular8具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
詳解webpack+es6+angular1.x項(xiàng)目構(gòu)建
這篇文章主要介紹了詳解webpack+es6+angular1.x項(xiàng)目構(gòu)建， 小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了詳解使用路由延遲加載 Angular 模塊,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框示例代碼
這篇文章主要介紹了Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框的詳細(xì)過程及示例代碼，文中通過示例介紹的很詳細(xì)，相信會(huì)對(duì)大家學(xué)習(xí)使用Angularjs具有一定的參考借鑒價(jià)值，有需要的朋友們可以一起來看看。2016-10-10
本篇文章主要介紹了AngularJS中的按需加載ocLazyLoad，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-01-01
給angular加上動(dòng)畫效遇到的問題總結(jié)
本文給大家總結(jié)了一下在angular中給ng-repeat列表加上動(dòng)畫效果時(shí)所遇到的問題及解決方法，推薦給大家，希望大家能夠喜歡。2016-02-02
Angular5升級(jí)RxJS到5.5.3報(bào)錯(cuò)：EmptyError: no elements in sequence的解
這篇文章主要給大家介紹了關(guān)于Angular5升級(jí)RxJS到5.5.3報(bào)錯(cuò)：EmptyError: no elements in sequence的解決方法，文中介紹了兩個(gè)解決方法，大家可以選擇使用，需要的朋友可以參考借鑒，下面來一起看看吧。2018-04-04
這篇文章主要介紹了詳解Angular6.0使用路由步驟(共7步)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06