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 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
如何实现动态删除javascript函数
May 27 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
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中的类型约束介绍
2015/05/11 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
西安众合通用.net笔试题
2013/03/18 面试题
Ajax主要包含了哪些技术
2014/06/12 面试题
外企办公室竞聘演讲稿
2013/12/29 职场文书
情人节活动策划方案
2014/02/27 职场文书
端午节活动策划方案
2014/03/09 职场文书
企业公益活动策划方案
2014/08/24 职场文书
委托书如何写
2014/08/30 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
先进人物事迹材料
2014/12/29 职场文书
综合素质评价自我评价
2015/03/06 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
win10更新失败无限重启解决方法
2022/04/19 数码科技
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android