草庐IT

Angularjs——初识AngularJS

engpj 2023-03-28 原文

AngularJS——初识AngularJS

AngularJS是什么

AngularJS是Google开源的一款前端JS结构化框架，它通过对前端开发进行分层，极好地规范了前端开发的风格——它将前端开发分为Controller层、Service层、DAO层和Model层。其中，Model对象与HTML页面（视图）上HTML元素进行双向绑定，开发者可通过Controller调用Service、DAO与后端交互，获取后端数据之后，只要修改其中Model对象的值，视图页面也会随之动态改变。这个设计架构层次非常清晰，而且具有一定的“强制性”，整个前端团队一旦采用AngularJS框架，那么整个前端开发风格会变得简单、清晰，所有团队成员都能采用一致的开发风格，这也是AngularJS的魅力所在。

AngularJS创始人的自述

“AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的伪静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。”

AngularJS特性(优点)

  • 双向数据绑定；
  • 声明式依赖注入；
  • 解耦应用逻辑、数据模型和视图；
  • 完善的页面指令；
  • 定制表单验证；
  • Ajax封装。

与jQuery的比较

jQuery

  • JS函数库；
  • 封装简化DOM操作。

AngularJS

  • JS结构化框架；
  • 主体不再是DOM，而是页面中的动态数据。

AngularJS的应用

构建单页面（single page application，SPA）Web应用或Web APP应用。

单页面应用（single page application）

定义

将所有的活动局限于一个页面，浏览器一开始就加载网页所有内容，当页面中有部分数据发生了变化，不会刷新整个页面，而是局部刷新（利用的Ajax技术）。

优点

  • 用户体验好，内容的改变不需要重新加载整个页面；
  • 适合前后端分离开发，服务器只出数据，减轻了服务器压力。

缺点

  • 首屏加载速度慢；
  • 不利于SEO优化。

AngularJS的组成

  • ng-app : 该指令用于设置AngularJS应用。例如为＜body.../＞元素增加了ng-app属性，这意味着所有AngularJS应用处于＜body.../＞元素内。在＜body.../＞元素内可使用其他AngularJS指令，也可使用{{}}来输出表达式。
  • ng-model : 该指令用于执行“双向绑定”，所谓双向绑定指的是将HTML输入元素的值与AngularJS应用的某个变量进行绑定。完成“双向绑定”之后，当HTML输入元素的值发生改变时，AngularJS应用中绑定的变量的值也会随之改变；反过来，当程序修改AngularJS应用的变量的值时，HTML输入元素的值也会随之改变。
  • ng-bind : 该指令用于绑定ng-model的数据。

下载AngularJS

AngularJS也是一个纯粹的JavaScript库，下载AngularJS与下载其它JavaScript库一样，打开链接后，选中相应的版本下载即可。下载链接

注意

  • AngularJS是AngularJS 1.X，并不是Angular 2.X（Angular 2没有JS后缀）；
  • AngularJS 1.X是真正轻量级JavaScript框架，比较适合熟悉JavaScript的前端开发者；
  • Angular 2.X使用的是TypeScript脚本，其开发高度依赖Node.js。

版本选择

  • angular.min.js：该版本是去除注释后的AngularJS库，文件体积较小，开发实际项目时推荐使用该版本。
  • angular.js：该版本的AngularJS库没有压缩，而且保留了注释。学习AngularJS及有兴趣研究AngularJS源代码的读者可以使用该版本。
  • angular-xxx.min.js：AngularJS为特定功能提供的支持库。比如angular-animate.min.js就是AngularJS的动画支持库；angular-cookies.min.js就是AngularJS的Cookie访问支持库。
  • angular-xxx.js：与对应的angular-xxx-min.js库的功能相同，只是保留了注释，没有压缩。

安装AngularJS

AngularJS库的安装很简单，只要在HTML页面中导入AngularJS的JavaScript文件即可。

<script type="text/javascript" src="angular.min.js"></script>

其中，src 属性为待导入的AngularJS文件。

第一个AngularJS应用

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <script src="../../js/angular-1.2.29/angular.js"></script>
    <title>第一个程序</title>
  </head>
  <body ng-app>
    <input type="text" ng-model="mymodel" />
    <p>您输入的内容是：<span>{{mymodel}}</span></p>
  </body>
</html>
mdashAngularjsAngularJSliangularjsAngular

有关Angularjs——初识AngularJS的更多相关文章

  1. ruby-on-rails - 获取 ActionController::RoutingError(当尝试使用 AngularJS 将数据发布到 Rails 服务器时，没有路由匹配 [OPTIONS] "/users" - 2

    尝试从我的AngularJS端将数据发布到Rails服务器时出现问题。服务器错误:ActionController::RoutingError(Noroutematches[OPTIONS]"/users"):actionpack(4.1.9)lib/action_dispatch/middleware/debug_exceptions.rb:21:in`call'actionpack(4.1.9)lib/action_dispatch/middleware/show_exceptions.rb:30:in`call'railties(4.1.9)lib/rails/rack/logg

  2. 玩以太坊链上项目的必备技能（初识智能合约语言-Solidity之旅一） - 2

    前面一篇关于智能合约翻译文讲到了，是一种计算机程序，既然是程序，那就可以使用程序语言去编写智能合约了。而若想玩区块链上的项目，大部分区块链项目都是开源的，能看得懂智能合约代码，或找出其中的漏洞，那么，学习Solidity这门高级的智能合约语言是有必要的，当然，这都得在公链``````以太坊上，毕竟国内的联盟链有些是不兼容Solidity。Solidity是一种面向对象的高级语言，用于实现智能合约。智能合约是管理以太坊状态下的账户行为的程序。Solidity是运行在以太坊（Ethereum）虚拟机（EVM）上，其语法受到了c++、python、javascript影响。Solidity是静态类型

  3. 【Linux】初识Linux --指令Ⅰ - 2

    Halo，这里是Ppeua。平时主要更新C语言，C++，数据结构算法，Linux…感兴趣就关注我吧！你定不会失望。目录1.ls显示当前目录下的文件内内容2.pwd-显示用户当前所在的目录3.cd-改变工作目录。将当前工作目录改变到指定的目录下1.cd-回到上一次待的工作空间2.cd..返回上一层目录1.相对路径:cd../aurora2.绝对路径:cd/home/aurora/lesson1/aurora3.cd~进入用户家目录4.cd/进入root目录4.mkdir-新建目录5.rmdir/rm-删除1.rmdir删除空文件夹2.rm删除1.rm-f2.rm-i3.rm-r1.ls显示当前目

  4. javascript - angularjs $state 和 $rootScope.$on($stateChangeStart) 问题 - 2

    我已经回答了多个问题，但还没有找到解决方案。我对状态处理有疑问。$urlRouterProvider.otherwise(function($injector,$location){var$state=$injector.get("$state");$state.go("cover");});$stateProvider.state('auth',{url:'/auth',templateUrl:'../views/authView.html',controller:'AuthControllerasauth'}).state('users',{url:'/users',templat

  5. javascript - 在具有静态内容的 angularjs bootstrap 选项卡上处于事件状态 - 2

    我正在使用AngularBootstrapUI来显示带有静态内容的标签集。我对此感到沮丧，因为UIBootstrapTab文档仅显示导航到通过绑定(bind)ng-repeat创建的选项卡。tab1GotoTab3tab2我发现了一些东西听到Stackoverflow但这不适用于当前版本的AngularBootstrapUI..Plunker 最佳答案 要将选项卡设置为事件状态，您需要在范围内将bool标志设置为“true”并将其与给定选项卡的active属性相关联。这看起来像tab1tab2当tabOneActive设置为true

  6. javascript - 结合 AngularJS、jQueryUI、Angular-Drag-Drop 排序列表 - 2

    我遇到以下情况，我需要允许用户从列表中选择对象并将它们拖/放到某个插槽中:对象的大小可以是插槽的一到三倍。所以如果用户将Object1拖到Slot0，那么它只占用Slot0(startSlot=0和endSlot=0)。但是，如果用户将对象3拖动到插槽3，则它会占用插槽3、4和5(startSlot=3和endSlot=5)。将对象放入槽中后，用户可以通过在槽中单击并上下拖动对象来重新排序对象。对象不能相互重叠:我正在使用Angular，所以我正在从数据库中读取对象列表，并且我有一个槽数变量。我尝试了几种解决方案。我相信使用jQuery和jQueryUI可拖动、可放置和可排序是解决方案

  7. javascript - AngularJS 中添加的自定义 header 仅显示在 Access-Control-Request-Headers 上 - 2

    我正在尝试使用拦截器使用以下代码向AngularJS应用程序中的每个请求添加自定义header:angular.module('app').factory('httpRequestInterceptor',function(){return{request:function(config){config.headers['testheader']='testheaderworks';returnconfig;}};});angular.module('app').config(function($httpProvider){$httpProvider.interceptors.push

  8. javascript - 这个 AngularJS 工厂示例究竟是如何工作的？一些疑惑 - 2

    我是AngularJS的新手，我正在学习教程。我对Angular中工厂的使用有疑问。我知道工厂是一种用于根据请求创建对象的模式。所以在例子中有如下代码://Createsvaluesorobjectsondemandangular.module("myApp")//Getthe"myApp"modulecreatedintotheroot.jsfile(intothismoduleisinjectedthe"serviceModule"service.value("testValue","AngularJSUdemy")//Defineafactorynamed"courseFacto

  9. javascript - 带有数据切换的 AngularJS ng-click - 2

    我有一个列表项，它切换模式并使用ng-click设置一个参数问题是在记录Course.SelectedCourse的任何其他地方调用函数时，它是未定义的，尽管Course.ID有一个值。 最佳答案 在Controller中使用一个函数，这可能看起来像这样:在View中:在Controller中functionsetSelectedCourse(course_id){$scope.Course.SelectedCourse=course_id;} 关于javascript-带有数据切换的A

  10. javascript - AngularJS:如何使用 ng-idle - 2

    我目前的情况是:myApp.config(['$routeProvider',function($routeProvider){$routeProvider.when('/home',{templateUrl:'partials/home.html',controller:'homeCtrl'});}这是我当前的.config()我如何将波纹管代码集成到我的上层代码中:.config(function(IdleProvider,KeepaliveProvider){IdleProvider.idle(10*60);//10minutesidleIdleProvider.timeout(

随机推荐