AngularJS基础知识
更新时间：2014年12月21日 14:16:23 投稿：hebedich
这篇文章主要介绍了AngularJS基础知识,包括AngularJS定义和特点以及构建AngularJS应用的方法，推荐给大家。
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两步，还有过滤器
相关文章
Angular中使用$watch监听object属性值的变化(详解)
下面小编就为大家带来一篇Angular中使用$watch监听object属性值的变化(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
Spartacus CMS Feature selector的实现解析
这篇文章主要为大家介绍了Spartacus CMS Feature selector的实现解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
这篇文章主要介绍了angular6 利用 ngContentOutlet 实现组件位置交换(重排)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
ionic4+angular7+cordova上传图片功能的实例代码
ionic是一个垮平台开发框架，可通过web技术开发出多平台的应用。这篇文章主要介绍了ionic4+angular7+cordova上传图片功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
本文主要介绍使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态。下面跟着小编一起来看下吧2017-04-04
本篇文章主要介绍了angular4 如何在全局设置路由跳转动画的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了AngularJS折叠菜单实现方法,结合完整实例形式分析了AngularJS实现折叠菜单的具体步骤与相关操作技巧,需要的朋友可以参考下2017-05-05
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
这篇文章主要介绍了解决angular的post请求后SpringMVC后台接收不到参数值问题的方法，感兴趣的小伙伴们可以参考一下2015-12-12
本文主要介绍AngularJS 依赖注入,这里对依赖注入做了详细介绍讲解,并提供效果图和示例代码以便学习参考2016-07-07
Angular能够让我们创建出具有原生表现效果的动画。我们将通过本文学习到如何使用Angular 6来创建各种动画效果。在此，我们将使用Visual Studio Code来进行示例演示。感兴趣的朋友跟随小编一起看看吧2018-10-10
最新评论