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 OOP面向对象介绍
Dec 02 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 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 转义使用详解
2013/07/15 PHP
php实现两个数组相加的方法
2015/02/17 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
php简单图像创建入门实例
2015/06/10 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
JS功能代码集锦
2016/05/04 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
python通过post提交数据的方法
2015/05/06 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
python for 循环获取index索引的方法
2019/02/01 Python
Python面向对象进阶学习
2019/05/21 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
项目合作计划书
2014/01/09 职场文书
七年级英语教学反思
2014/01/15 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
班级团队活动方案
2014/08/14 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
微信小程序基础教程之echart的使用
2021/06/01 Javascript
深入理解go slice结构
2021/09/15 Golang
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫