AngularJS学习笔记

引入angular.js

若在页面中引入了angular.js并添加了ng-app="app" ng-controller="ctrl",而没有实现模型,会报错:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

初始化变量

  • 方法一,在html中设置
<div ng-app="" ng-init="firstName='John'">   
    <p>姓名为 <span ng-bind="firstName"></span></p>     
</div>
  • 方法二:在js中设置
var app = angular.module('app', ['ngAnimate']);
app.controller('ctrl', function ($scope, $http) {
    $scope.step = 1;
    ...
});

防止载入过程中界面闪烁

添加属性:ng-cloak

<div class="mask" ng-show="show" ng-cloak>

IntelliJ不识别AngularJS、无自动提示的问题

  • 问题描述:
    html文件中提示 Attribute ng-disabled is not allowed here,js文件中不识别angular.module('myApp', [])方法;
    代码自动完成的提示不完整。
  • 解决:
    办法一:在工程中放入angular.js,而不仅仅是angular.min.js,无论引用哪一个
    办法二: 设置 > Languages & Frameworks > JavaScript > Libraries. Attach the local angular.js as a file in the new library.

使用http请求时,需声明使用http模块,否则会提示$http is not defined,其他模块类似

app.controller('ctrl', function ($scope, $http) {
    $scope.getX = function () {
        $http({
            method: 'GET',
            url: 'json/x.json'
        }).then(function success(response) {
            var status = response.data.status;
            ...
        }, function error(e) {
            console.log(e);
        });
    };
});

一个html页面只能加载一个ng-app的问题

  1. 可以简单的将多个 ng-app 合并成为一个根模块。
  2. 可以手动装载除了第一个以外的多个 ng-app。
    angular.bootstrap(document.getElementById("app2div"), ['myApp2']);

AngularJS操作cookie

    var app = angular.module('myApp', ['ngCookies']);
    app.controller('myCtrl', function ($scope, $http, $cookies) {
        $scope.foo = function () {
            $cookies.put('user', 'eric', {path: '/'});
        };
    });

注意:
一、默认情况下子目录下设置的cookie父目录页面读不到,需明确设置path
二、不要将$cookies写成$cookieStore

文档加载完成时执行

    $scope.$watch('$viewContentLoaded', function () {
        $scope.init();
    });

推荐阅读更多精彩内容

  • 1. 介绍 AngularJS是一款由Google公司开发维护的前端MVC框架,其克服了HTML在构建应用上的诸多...
    崔皓翔阅读 318评论 0 5
  • 简介: AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。 Ang...
    JenniferYe阅读 1,016评论 0 13
  • 1、什么是angularjs AngularJS是一个框架(诸多类库的集合)以数据和逻辑做为驱动(核心)。 Ang...
    margery阅读 39评论 0 0
  • 表达式 AngularJS 的表达式写在双大括号内{{ expression }},这把数据绑定到HTML。表达式...
    elkelk阅读 23评论 0 0
  • 2017.5.15 一大早闹钟还没响,妈妈害怕我上班迟到,老早起床做好早餐,然后开始敲门叫我起床,揉着惺忪的眼睛,...
    xiaokuzi阅读 54评论 0 0