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两步,还有过滤器

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
You might like
php中常用编辑器推荐
2007/01/02 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
php实用代码片段整理
2016/11/12 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
jQuery基础知识小结
2014/12/22 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
python版本五子棋的实现代码
2018/12/11 Python
python实现年会抽奖程序
2019/01/22 Python
Python控制Firefox方法总结
2019/06/03 Python
python pandas模块基础学习详解
2019/07/03 Python
Django单元测试工具test client使用详解
2019/08/02 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
大学生创业计划书的格式要求
2013/12/29 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
亚运会口号
2014/06/20 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
师德承诺书
2015/01/20 职场文书
领导视察通讯稿
2015/07/18 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python