当前位置：首页 > 资讯 > 技术文档

AngularJS基础知识

时间：2021-12-06 10:45 编辑：来源：阅读：
扫一扫，手机访问

摘要：AngularJS基础知识

[b]angularJS定义和特点[/b] 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。 [b]构建angularJS应用[/b] 添加Angular的<script>标签到<head>标签里

[u]复制代码[/u] 代码如下:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>

添加ng-app directive到<body>标签

[u]复制代码[/u] 代码如下:

<body

    ng-app="guetonline"

    ng-controller="MainController"

    >

新建目录script和app.js文件，在app.js中定义和配置所有模块和依赖

[u]复制代码[/u] 代码如下:

var app = angular.module('guetonline', [

  'ngRoute',

  'mobile-angular-ui',

  'mobile-angular-ui.gestures'

]);

在模块app中定义控制器、服务、指令

[u]复制代码[/u] 代码如下:

app.controller( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) //控制器

app.service( 'MainSevicel', function() {} ) //服务

app.directive( 'dragToDismiss', function() {} ) //指令

在模块app中定义路由

[u]复制代码[/u] 代码如下:

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

全部评论(0)

上一篇：android 之Spinner下拉菜单实现级联
下一篇：easyUI实现类似搜索框关键词自动提示功能示例代码

资讯排行榜
更多>>