angularJs 个人初探笔记（angularjs教程）

25-02-26 14

本文将介绍angularJs个人初探笔记的详细情况，特别是关于angularjs教程的相关信息。我们将通过案例分析、数据研究等多种方式，帮助您更全面地了解这个主题，同时也将涉及一些关于angularj

本文将介绍angularJs 个人初探笔记的详细情况，特别是关于angularjs教程的相关信息。我们将通过案例分析、数据研究等多种方式，帮助您更全面地了解这个主题，同时也将涉及一些关于angularjs – 混合Angular 1.x Angular 6应用程序,包含Angular 1.x中的vanilla JS和TS文件、AngularJs 初探 -- 让 AngularJS 的 $http 服务像 jQuery.ajax () 一样工作、AngularJS 学习笔记---AngularJS 控制器(controller)、AngularJS 学习笔记---AngularJS 模型（ng-model 指令）的知识。

本文目录一览：

angularJs 个人初探笔记（angularjs教程）
angularjs – 混合Angular 1.x Angular 6应用程序,包含Angular 1.x中的vanilla JS和TS文件
AngularJs 初探 -- 让 AngularJS 的 $http 服务像 jQuery.ajax () 一样工作
AngularJS 学习笔记---AngularJS 控制器(controller)
AngularJS 学习笔记---AngularJS 模型（ng-model 指令）

angularJs 个人初探笔记（angularjs教程）

1.环境搭建与angular - phoneCat 安装可以通过git clone来下载源代码： git clone --depth=14 https://github.com/angular/angular-phonecat.git –depth=14选项的意思为：仅下载最近14次的代码提交版本；这么做可以减少下载的文件大小，加快下载。安装依赖包 PhoneCat是一个Web应用程序，因此最好在Web服务器中运行，以期获得最佳结果。官方推荐安装Node.js ( http://nodejs.org/download/ )。 PhoneCat项目的运行与测试依赖一些别的工具，可以在安装Node.js后通过npm命令来安装这些依赖包。以下命令需在angular-phonecat项目路径下运行： npm install 运行该命令后，会在angular-phonecat项目路径下安装以下依赖包： Bower . 包管理器 Http-Server . 轻量级Web服务器 Karma . 用于运行单元测试 Protractor . 用于运行端到端测试运行PhoneCat项目完成上述工作后，运行PhoneCat项目很简单，在angular-phonecat项目路径下运行以下命令即可： npm start PhoneCat运行后，可以在浏览器中打开http://localhost:8000/app/index.html来访问该Web应用。运行单元测试 PhoneCat项目中的单元测试是使用Karma来完成的，所有的单元测试用例都存放在test/unit目录下。可以通过执行以下命令来运行单元测试： npm test 值得一提的是，在运行单元测试前，计算机上必须安装Google Chrome浏览器。运行端到端测试 PhoneCat项目使用端到端测试来保证Web应用的可操作性，而这个端到端测试是通过使用Protractor来实现的，所有的端到端测试用例都存放在test/e2e目录下。可以通过执行以下步骤来运行端到端测试： //更新webdriver，此命令只需运行一次 npm run update-webdriver //运行PhoneCat npm start 打开另一个命令行窗口，在其中运行： npm run protractor

angularjs – 混合Angular 1.x Angular 6应用程序,包含Angular 1.x中的vanilla JS和TS文件

当AngularJS文件是JS和TS时,我正在尝试构建混合应用程序.
我似乎无法添加到JS控制器的路由.

我依赖于以下example并执行以下操作：

const statesConfigBlock = ['$stateProvider',$stateProvider => {
  $stateProvider.state('main',{
    url: '/main',templateUrl: 'app/components/layout/mainView.html',controller: 'mainController as main'
  })
}];
appModuleAngularJS.config(statesConfigBlock);

虽然我有一个mainCtrl.js文件定义为：

var app = angular.module('myApp',[]);

(function(app) {
  'use strict';

  app.controller('mainController',[
      function () {
        console.log("blah");

      }]);
})(app);

当我运行应用程序时,我得到：

The controller with the name ‘mainController’ is not registered

但是当我在控制台中运行时,我确实看到了它：

angular.module('myApp')._invokeQueue.filter(function(el){
  return el[0] === "$controllerProvider";
}).map(function(el){
  return el[2]["0"];
});

解决方法

好吧,我想我成功了.它可能不是最好的解决方案但是这里.

首先,我创建了一个包含模块声明的js文件：

appDependencies = [];
app = angular.module('myApp',appDependencies);

所有Angular 1.x控制器和服务都使用全局变量app,如下所示：

(function(app) {
  'use strict';

  app.controller('mainController',[
      function () {
        console.log("blah");

      }]);
})(app);

最后,Angular 1.x模块ts文件使用全局应用程序并向其添加依赖项：

...

declare const app: any;
declare var appDependencies: any;

export const appModuleAngularJS = app;

angular.forEach([
  uiRouter,upgradeModule.name
],module => {
  appDependencies.push(module);
});

...

const statesConfigBlock = ['$stateProvider',controller: 'mainController as main'
  })
}];
appModuleAngularJS.config(statesConfigBlock);

...

现在,index.html文件中js导入的顺序非常重要.应该首先应用减速文件,然后是所有Angular 1.x控制器和服务,然后是转换为js文件的* .ts文件.

这个解决方案对我有用,但我非常乐意阅读更好的解决方案.

干杯!

AngularJs 初探 -- 让 AngularJS 的 $http 服务像 jQuery.ajax () 一样工作

最近着手开发一个后台系统，前端采用的是 AngularJs 来与后台交互，对于我们这群 jquery 疯狂的铁粉，遇到了不少转不过弯的问题，为了更高效的开发应用，在私下的时间收集和改造了一下 AngularJS 的 $http 服务，特此分享。

$http 的 post
. 请求默认的 content-Type=application/json
. 提交的是 json 对象的字符串化数据，
. 后端无法从 post 中获取，
. 跨域请求是复杂请求，会发送 OPTIONS 的验证请求，成功后才真正发起 post 请求

jQuery.post
. 使用的是 content-Type=application/x-www-form-urlencoded -
. 提交的是 form data，
. 后端可以从 post 中获取，
. 简单跨域请求，直接发送

解决思路：

1. 改造前端

（1）方案一：

配置 $http 服务的默认 content-Type=application/x-www-form-urlencoded, 如果是指配置这个的话，虽然提交的 content-Type 改了，但是提交的数据依然是个 json 字符串，不是我们想要的 form data 形式的键值对，需要实现 param 方法.

angular.module(''MyModule'', [], function($httpProvider) {
    // Use x-www-form-urlencoded Content-Type
    $httpProvider.defaults.headers.post[''Content-Type''] = ''application/x-www-form-urlencoded;charset=utf-8'';

    /**
     * The workhorse; converts an object to x-www-form-urlencoded serialization.
     * @param {Object} obj
     * @return {String}
     */
    var param = function(obj) {
        var query = '''',
            name, value, fullSubName, subName, subValue, innerObj, i;

        for (name in obj) {
            value = obj[name];

            if (value instanceof Array) {
                for (i = 0; i < value.length; ++i) {
                    subValue = value[i];
                    fullSubName = name + ''['' + i + '']'';
                    innerObj = {};
                    innerObj[fullSubName] = subValue;
                    query += param(innerObj) + ''&'';
                }
            } else if (value instanceof Object) {
                for (subName in value) {
                    subValue = value[subName];
                    fullSubName = name + ''['' + subName + '']'';
                    innerObj = {};
                    innerObj[fullSubName] = subValue;
                    query += param(innerObj) + ''&'';
                }
            } else if (value !== undefined && value !== null)
                query += encodeURIComponent(name) + ''='' + encodeURIComponent(value) + ''&'';
        }

        return query.length ? query.substr(0, query.length - 1) : query;
    };

    //一个function数组，负责将请求的body，也就是post data，转换成想要的形式
    // Override $http service''s default transformRequest    
    $httpProvider.defaults.transformRequest = [function(data) {
        return angular.isObject(data) && String(data) !== ''[object File]'' ? param(data) : data;
    }];
});

配合一点 $resource 的 API 参考，这个代码就好懂了：
https://docs.angularjs.org/api/ngResource/service/$resource

Note:
上述 param 方法定义的地方不要使用 jQuery.param 方法，因为 jQuery.param 方法会将要处理的对象上的 function 全执行一边，把返回的值当做参数的值，这是我们不期望的，我们写的这个 param 方法也是为了解决上面说的 content-Type=x-www-form-urlencoded，但是提交的数据依然是 json 串的问题。

方案二：

      $scope.formData = {};
        $http({
                method: ''POST'',
                url: ''/user/'',
                data: $.param($scope.formData), // pass in data as strings
                headers: { ''Content-Type'': ''application/x-www-form-urlencoded'' } // set the headers so angular passing info as form data (not request payload)
            })
            .success(function(data) {
                console.log(data);

                if (!data.success) {
                    // if not successful, bind errors to error variables
                    $scope.errorName = data.errors.name;
                    $scope.errorSuperhero = data.errors.superheroAlias;
                } else {
                    // if successful, bind success message to message
                    $scope.message = data.message;
                }
            });

参考
http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

2. 后端使用注意：

（1）Spring MVC ajax 后台方法不能加 @RequestBody ，否则会报 Failed to load resource: the server responded with a status of 415 (Unsupported Media Type) 错误

（2）使用 Jquery 风格的写法就 OK 啦！

万事搞定，只欠高效开发，O (∩_∩) O 哈哈～

AngularJS 学习笔记---AngularJS 控制器(controller)

AngularJS控制器

AngularJS 控制器控制AngularJS 应用程序的数据。

AngularJS 控制器是常规的JavaScript 对象。

AngularJS 控制器

AngularJS 应用程序被控制器控制。

ng-controller指令定义了应用程序控制器。

控制器是JavaScript 对象，由标准的 JavaScript对象的构造函数创建。

AngularJS 实例

<divng-app="myApp"ng-controller="myCtrl">

名:<inputtype="text"ng-model="firstName"><br>
姓:<inputtype="text"ng-model="lastName"><br>
<br>
姓名:{{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

尝试一下 »

应用解析：

AngularJS 应用程序由ng-app定义。应用程序在 <div> 内运行。

ng-controller="myCtrl"属性是一个 AngularJS 指令。用于定义一个控制器。

myCtrl函数是一个 JavaScript 函数。

AngularJS 使用$scope对象来调用控制器。

在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。

控制器的$scope（相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName和lastName)。

ng-model指令绑定输入域到控制器的属性（firstName 和 lastName）。

@H_301_104@

控制器方法

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

控制器也可以有方法（变量和函数）：

AngularJS 实例

<divng-app="myApp"ng-controller="personCtrl">

名:<inputtype="text"ng-model="firstName"><br>
姓:<inputtype="text"ng-model="lastName"><br>
<br>
姓名:{{fullName()}}

</div>

<script>
var app = angular.module('myApp',[]);
app.controller('personCtrl',function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>

尝试一下 »

外部文件中的控制器

在大型的应用程序中，通常是把控制器存储在外部文件中。

只需要把 <script> 标签中的代码复制到名为personController.js的外部文件中即可：

AngularJS 实例

<divng-app="myApp"ng-controller="personCtrl">

First Name:<inputtype="text"ng-model="firstName"><br>
Last Name:<inputtype="text"ng-model="lastName"><br>
<br>
Full Name:{{firstName + " " + lastName}}

</div>

<scriptsrc="personController.js"></script>

尝试一下 »

其他实例

以下实例创建一个新的控制器文件:

angular.module('myApp',[]).controller('namesCtrl',function($scope) {
$scope.names = [
{name:'Jani',country:'norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});

保存文件为namesController.js:

然后，在应用中使用控制器文件:

AngularJS 实例

<divng-app="myApp"ng-controller="namesCtrl">

<ul>
<ling-repeat="x in names">
{{ x.name + ',' + x.country }}
</li>
</ul>

</div>

<scriptsrc="namesController.js"></script>

尝试一下 »

AngularJS 学习笔记---AngularJS 模型（ng-model 指令）

AngularJSng-model 指令

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input,select,textarea)的值。

ng-model 指令

ng-model指令可以将输入域的值与 AngularJS 创建的变量绑定。

AngularJS 实例

<divng-app="myApp"ng-controller="myCtrl">
名字:<inputng-model="name">
</div>

<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
$scope.name = "John Doe";
});
</script>

尝试一下 »

双向绑定

双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：

AngularJS 实例

<divng-app="myApp"ng-controller="myCtrl">
名字:<inputng-model="name">
<h1>你输入了:{{name}}</h1>
</div>

尝试一下 »

验证用户输入

AngularJS 实例

<formng-app=""name="myForm">
Email:
<inputtype="email"name="myAddress"ng-model="text">
<spanng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

尝试一下 »

以上实例中，提示信息会在ng-show属性返回true的情况下显示。

ps:

HTML 5 <input> type 属性

定义和用法

type 属性规定 input 元素的类型。

注释：该属性不是必需的，但是我们认为您应该始终使用它。

定义用于 e-mail 地址的文本字段

输入类型 - email

email 输入类型用于应该包含电邮地址的输入字段。

当提交表单时，会自动地对 email 字段的值进行验证。

实例

E-mail: <input type="email" name="user_email" />

亲自试一试

提示：iPhone 的 Safari 浏览器会识别 email 输入类型，然后改变触摸屏的键盘来适应它（添加 @ 和 .com 选项）。

http://www.w3school.com.cn/html5/att_input_type.asp

BTW,熟悉html5的人应该都知道，我是专门去查了一下，感觉还是很强大的，这在以前都是通过js去做的，html5已经实现了

应用状态

ng-model指令可以为应用数据提供状态值(invalid,dirty,touched,error):

AngularJS 实例

<formng-app=""name="myForm"ng-init="myText = 'test@runoob.com'">
Email:
<inputtype="email"name="myAddress"ng-model="myText"required></p>
<h1>状态</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>

尝试一下 »

CSS 类

ng-model指令基于它们的状态为 HTML 元素提供了 CSS 类：

AngularJS 实例

<style>

input.ng-invalid{
background-color:lightblue;
}

</style>
<body>

<formng-app=""name="myForm">
输入你的名字:
<inputname="myAddress"ng-model="text"required>
</form>

尝试一下 »

ng-model指令根据表单域的状态添加/移除以下类：

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

关于angularJs 个人初探笔记和angularjs教程的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于angularjs – 混合Angular 1.x Angular 6应用程序,包含Angular 1.x中的vanilla JS和TS文件、AngularJs 初探 -- 让 AngularJS 的 $http 服务像 jQuery.ajax () 一样工作、AngularJS 学习笔记---AngularJS 控制器(controller)、AngularJS 学习笔记---AngularJS 模型（ng-model 指令）的相关信息，请在本站寻找。

本文标签：