欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJS基础知识

程序员文章站 2022-09-21 21:52:09
angularjs定义和特点 1.google前端开源框架 2.mvvm(model view view-model)设计模式 : model将和viewmodel互动...

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