当前位置: 首页 > 编程笔记 >

AngularJS基础知识

祁永嘉
2023-03-14
本文向大家介绍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="https://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 指令是扩展的 HTML 属性,带有前缀 ng- 1、 ng-app: 定义了 AngularJS 应用程序的根元素; ng-app 指令在

  • 本文向大家介绍AngularJS基础知识笔记之表格,包括了AngularJS基础知识笔记之表格的使用技巧和注意事项,需要的朋友参考一下 表格数据本质上通常是重复的。ng-repeat指令,可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。 表格可以使用CSS样式设置样式,如下: 例子 下面的例子将展示上述所有指令。 testAngularJS.html 以上所述就是本文的

  • 本文向大家介绍Angularjs基础知识及示例汇总,包括了Angularjs基础知识及示例汇总的使用技巧和注意事项,需要的朋友参考一下 angularjs是google开发的一款高大上的前端mvc开发框架。 Angularjs官网:https://angularjs.org/ 官网有demo,访问可能需要FQ Angularjs中国社区:http://www.angularjs.cn/ 适合初学者

  • 本文向大家介绍AngularJS基础知识笔记之过滤器,包括了AngularJS基础知识笔记之过滤器的使用技巧和注意事项,需要的朋友参考一下 过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。 S.No. 名称 描述 1 大写 转换文本为大写文本。 2 小写 转换文本为小写文本。 3 货币 货币格式格式文本。 4 过滤器 过滤数组中它根据所提供的标准的一个

  • 基础知识 基于 ruby 写的 官网文档:https://www.elastic.co/guide/en/logstash/5.2/first-event.html 如果是通过网络来收集,并不需要所有机子都装,但是如果是要通过读取文件来收集,那文件所在的那个机子就的安装 配置文件的写法格式:https://www.elastic.co/guide/en/logstash/5.2/configura

  • 这些基础知识简单了解一下就可以了,Linux 用的多了 就会慢慢熟悉理解了。 快捷键表 Ctrl键是终端用户常用的按键,但大多数触摸键盘都没有这个按键,因此 Termux 使用音量减小按钮来模拟Ctrl键。 例如,在触摸键盘上按音量减小+ L就相当于是键盘上按Ctrl + L的效果一样,达到清屏的效果。 Ctrl + A -> 将光标移动到行首 Ctrl + C -> 中止当前进程 Ctrl +