手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >AngularJS基础知识
AngularJS基础知识
摘要:angularJS定义和特点1.google前端开源框架2.MVVM(modelviewview-model)设计模式:Model将和Vie...

angularJS定义和特点

1.google前端开源框架

2.MVVM(model view view-model)设计模式 : Model将和ViewModel互动(通过$scope对象),将监听Model的变化。这些可以通过View来发送和渲染,由HTML来展示你的代码

3.方便的REST

4.数据绑定和依赖注入

5.可以操作XML一样操作HTML,AngularJS通过自己的编译器和directives来完成相关的设置

6.模板被作为DOM元素传递到Angular的编译器

7.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。

构建angularJS应用

添加Angular的<script>标签到<head>标签里

复制代码 代码如下:

<script src="http://www.jb51.net/cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>

添加ng-app directive到<body>标签

复制代码 代码如下:

<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中定义控制器、服务、指令

复制代码 代码如下:

app.controller( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) //控制器

app.service( 'MainSevicel', function() {} ) //服务

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});

});

待续。。下一步深入学习4.5两步,还有过滤器

【AngularJS基础知识】相关文章:

CSS+JS构建的图片查看器

AngularJS 2.0新特性有哪些

创建你的第一个AngularJS应用的方法

angular2使用简单介绍

AngularJS身份验证的方法

AngularJS的内置过滤器详解

AngularJs中route的使用方法和配置

AngularJS基础知识笔记之过滤器

[JS]点出统计器

AngularJS向后端ASP.NET API控制器上传文件

精品推荐
分类导航