编程 Javascript

AngularJS基础知识

Posted in Javascript onDecember 21, 2014

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="//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基础知识

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

复选框全选与全不选操作实现思路

Aug 18 Javascript

js取值中form.all和不加all的区别介绍

Jan 20 Javascript

jQuery中slice()方法用法实例

Jan 07 Javascript

js中函数声明与函数表达式

Jun 03 Javascript

JavaScript正则表达式匹配 div style标签

Mar 15 Javascript

jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】

Mar 03 Javascript

js实现手机web图片左右滑动效果

Dec 29 Javascript

如何使node也支持从url加载一个module详解

Jun 05 Javascript

vue中$nextTick的用法讲解

Jan 17 Javascript

vscode中eslint插件的配置（prettier配置无效）

Sep 10 Javascript

JavaScript实现轮播图效果代码实例

Sep 28 Javascript

vue组件创建的三种方式小结

Feb 03 Javascript

javascript关于继承的用法汇总

Dec 20 #Javascript

jquery实现将获取的颜色值转换为十六进制形式的方法

Dec 20 #Javascript

jQuery的text()方法用法分析

Dec 20 #Javascript

jQuery中click事件的定义和用法

Dec 20 #Javascript

javascript中String对象的slice()方法分析

Dec 20 #Javascript

javascript中Number对象的toString()方法分析

Dec 20 #Javascript

javascript中parseInt()函数的定义和用法分析

Dec 20 #Javascript