编程 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 相关文章推荐

javascript 写类方式之三

Jul 05 Javascript

javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果

Mar 08 Javascript

关于文本框的一些限制控制总结~~

Apr 15 Javascript

jQuery制作仿腾讯web qq用户体验桌面

Aug 20 Javascript

node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作

Jul 29 Javascript

jQuery异步获取json数据方法汇总

Dec 22 Javascript

javascript中判断json的方法总结

Aug 27 Javascript

jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】

Mar 21 jQuery

jQuery 1.9版本以上的浏览器判断方法代码分享

Aug 28 jQuery

Angular4学习教程之HTML属性绑定的方法

Jan 04 Javascript

对Vue beforeRouteEnter 的next执行时机详解

Aug 25 Javascript

浅谈JavaScript节流和防抖函数

Aug 25 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