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应用

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

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
  2. 添加ng-app directive到<body>标签 
    <body
    
    ng-app="guetonline"
    
    ng-controller="MainController"
    
    >
  3. 新建目录script和app.js文件，在app.js中定义和配置所有模块和依赖 
    var app = angular.module('guetonline', [
    
  'ngRoute',
    
  'mobile-angular-ui',
    
  'mobile-angular-ui.gestures'
    
]);
  4. 在模块app中定义控制器、服务、指令 
    app.controller( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) //控制器
    
app.service( 'MainSevicel', function() {} ) //服务
    
app.directive( 'dragToDismiss', function() {} ) //指令
  5. 在模块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});
    
});
  6. 待续。。下一步深入学习4.5两步，还有过滤器

AngularJS学习-初识的更多相关文章

  1. Angularjs学习---官方phonecat实例学习angularjs step0 step1

    接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...

  2. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

  3. 我的AngularJS 学习之旅

    我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就 ...

  4. 推荐10个很棒的AngularJS学习指南

    AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...

  5. Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结

    karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...

  6. AngularJs学习总结－了解基本特性（－）

    现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...

  7. [整理]AngularJS学习资源

    https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...

  8. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  9. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

随机推荐

  1. 4 weekend110的hdfs下载数据源码跟踪铺垫 + hdfs下载数据源码分析-getFileSystem（值得反复推敲和打断点源码）

    Hdfs下载数据源码分析 在这里,我是接着之前的,贴下代码 package cn.itcast.hadoop.hdfs; import java.io.FileInputStream; import ...

  2. ajax 小案例

    ajax 异步提交数据,实现无刷新提交表单 ajax.html <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  3. 圣诞节来了，雪花纷飞的CSS3动画，还不首页用起来

    圣诞节来了,冬天来了,怎么可以没有雪花纷飞效果,昨天下班前折腾了一会儿,弄了个雪花纷飞的实例,有兴趣的可以交流分享下. 原文链接:http://www.html5think.com/article/i ...

  4. 20169210《Linux内核原理与分析》第十二周作业

    Return-to-libc 攻击实验 缓冲区溢出的常用攻击方法是用 shellcode 的地址来覆盖漏洞程序的返回地址,使得漏洞程序去执行存放在栈中 shellcode.为了阻止这种类型的攻击,一些 ...

  5. JSP中嵌入java代码的标签方式(转)

    (1)声明变量或方法 :  <%! 声明; %> :慎重使用,因为此方法定义的是全局变量 (2)java片段(scriptlet):  <% java代码; %> (3)表达式 ...

  6. OpenJDK和Sun/OracleJDK 区别 与联系

    首先要先明确之间,以及OpenJDK 6.OpenJDK 7.OpenJDK 7u和OpenJDK 8等项目之间是什么关系,这有助于确定接下来编译要使用的JDK版本和源码分支.从前面介绍的Java发展 ...

  7. WIN32 根据程序名(映像名称)终止外部程序

    场景: 1.有时候需要调用外部程序,但是外部程序有可能崩溃挂起,这样这个进程就没法结束,所以再在下次调用前需要先结束之前调用的. 2.没考虑到权限问题,应该是只能终止当前用户启动的进程. #inclu ...

  8. 第二次装OA系统

    第二次安装:1.解压之后再MYOA目录下 找到一键安装.bat2.安装之后,一闪而过.(电脑上不需要apache,也不需要 mysql)3.192.168.1.111(自己电脑IP)看是否可以,若不可 ...

  9. Android（java）学习笔记182：保存数据到SD卡 （附加：保存数据到内存）

    1. 如果我们要想读写数据到SD卡中,首先必须知道SD的路径: File file = new File(Environment.getExternalStorageDirectory()," ...

  10. 关于js中return false、event.preventDefault()和event.stopPropagation()

    在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false;和event.preventDefault()来阻止,但对它俩的区别还是有些一知半解,于是看了文档,查了些资料,在此 ...