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的 添加ng-app directive到标签 复制代码 代码如下: 新建目录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两步,还有过滤器 您可能感兴趣的文章: AngularJS 最常用的八种功能(基础知识) AngularJS学习第一篇 AngularJS基础知识 Angularjs 基础入门 Angularjs基础知识及示例汇总 AngularJS实用基础知识_入门必备篇(推荐) AngularJS 相关文章 详解Angular之constructor和ngOnInit差异及适用场景 这篇文章主要介绍了详解Angular之constructor和ngOnInit差异及适用场景的相关资料,有兴趣的可以了解一下 2017-06-06 Ionic + Angular.js实现图片轮播的方法示例 图片轮播在我们日常开发中是再熟悉不过的了,下面这篇文章主要给大家介绍了Ionic + Angular实现图片轮播的方法,文中给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。 2017-05-05 Angular+Node生成随机数的方法 这篇文章主要介绍了Angular+Node生成随机数的方法,结合具体实例分析了Angular与Node结合控制前后端实现随机数功能的相关操作技巧,需要的朋友可以参考下 2017-06-06 AngularJS中过滤器的使用与自定义实例代码 这篇文章运用实例代码给大家介绍了angularjs中过滤器的使用和自定义过滤器,对大家学习AngularJS具有一定的参考借鉴价值,感兴趣的朋友们可以参考借鉴。 2016-09-09 AngularJS基础 ng-paste 指令简单示例 本文主要介绍AngularJS ng-paste 指令,这里对ng-paste 指令的基础资料做了整理,并附有代码示例,有需要的朋友可以参考下 2016-08-08 angular中实现控制器之间传递参数的方式 本篇文章主要介绍了angular中实现控制器之间传递参数的方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-04-04 angular 实现同步验证器跨字段验证的方法 几乎每个web应用都会用到表单,那么验证器就是必不可少的东西,这篇文章主要介绍了angular 实现同步验证器跨字段验证的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2019-04-04 深入理解AngularJs-scope的脏检查(一) 这篇文章主要介绍了深入理解AngularJs-scope的脏检查(一) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 angularjs项目的页面跳转如何实现(5种方法) 本篇文章主要介绍了详解angularjs项目的页面跳转如何实现 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 Angular2关于@angular/cli默认端口号配置的问题 本篇文章主要介绍了Angular2关于@angular/cli默认端口号配置的问题,非常具有实用价值,需要的朋友可以参考下 2017-07-07 最新评论

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

您可能感兴趣的文章:

  • AngularJS 最常用的八种功能(基础知识)
  • AngularJS学习第一篇 AngularJS基础知识
  • Angularjs 基础入门
  • Angularjs基础知识及示例汇总
  • AngularJS实用基础知识_入门必备篇(推荐)
张贴在3