<!DOCTYPE HTML>

<html>

<head>

    <title> 测试页 </title>

    <meta charset="utf-8">

</head>

<body  ng-app="myApp">

  <div ng-controller="query">

          <input id="input" ng-model="text">

    <span ng-bind="text"></span>

    <button ng-click="submit()">提交</button>

  </div>

  <div class="select" ng-controller="select">

    <span ng-click="spanClick()" ng-bind="value"></span>

    <ul ng-hide="show">

      <li ng-repeat="l in list" ng-bind="l" ng-click="liClick($index)"></li>

    </ul>

  </div>
<script src="http://www.hubwiz.com/scripts/angular.min.js"></script>

</body>

</html>

JS 部分

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

myApp.service("validator", function(){

    return function(str, type){

        return !!str;

    }

});

myApp.controller("query", ["$scope", "validator", function($scope, validator){

  //$scope.abc = abc;

  console.log(abc);

  $scope.text ="hello";

  $scope.submit = function(){

        console.log('sbumit');

        var input = document.getElementById("input");

      if(!validator(input.value)){

          console.log('请输入用户名');

      }else{

          console.log('ok');

      }

    }

}]);

myApp.controller("select", function($scope){

    $scope.show = true;

      $scope.value = "请选择";

      $scope.spanClick = function(){

    $scope.show = !$scope.show;

  }

      $scope.list = ["1", "2","3"];

      $scope.liClick = function(index){

        $scope.value = $scope.list[index];

      }

});

一些基础指令练习。

昨天在跟着视频练习时，遇到了不能使用纯function 定义controller 的情况，我想应该是新版不支持了吧？

每天进步一点点。

angular 基础练习的更多相关文章

  1. 第214天:Angular 基础概念

    一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...

  2. Angular基础---->AngularJS的使用(一)

    AngularJS主要用于构建单页面的Web应用.它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单.今天,我们就开始Angular环境的搭建和第一个实 ...

  3. Angular基础(三) TypeScript

    一.模仿Reddit a) 运行ng new –ng4angular-reddit创建应用,从随书代码中复制样式文件,新建组件app-root,代码为: 界面可以看到了: b) 对于界面输入的数据,获 ...

  4. Angular基础(二) 组件的使用

    ​ 一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/cli@1.0.0安装CLI,为CLI的位置设置环境变量,然后就可以 ...

  5. angular基础入门

    第一章 AngularJs入门 AngularJS是一款由Google公司开发维护的前端框架,其克服了HTML在构建应用上的诸多不足,从而降低了开发成本提升了开发效率. 1 特点 AngularJS与 ...

  6. Angular 基础入门

    简介 什么是AngularJS 一个功能非常完备的前端框架,通过增强HTML的方式提供一种便捷开发Web应用程序的方式 其核心特点就是几乎无任何DOM操作,让开发人员的精力和时间全部集中于业务 MVC ...

  7. Angular基础教程：表达式日期格式化[转]

    本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | date:'short' }})11/24/15 ...

  8. Angular基础知识

    AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 ng-directives 扩展了 HTML. ...

  9. Angular基础（二）

    双向数据 利用angular把input框里面的值和h3的值绑定在一起.在input里输入内容,内容会在h3标签里显示出来. 具体效果请看下面代码:   <!DOCTYPE html>   ...

随机推荐

  1. 《C语言程序设计现代方法》第4章 编程题

    1 编写一个程序,要求用户输入一个两位数,然后按数位的逆序打印出这个数. 方法一:没技术含量的 #include <stdio.h> int main() { int high, low; ...

  2. JavaScript高级程序设计58.pdf

    15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...

  3. GPU 的硬件基本概念，Cuda和Opencl名词关系对应

    GPU 的硬件基本概念 Nvidia的版本: 实际上在 nVidia 的 GPU 里,最基本的处理单元是所谓的 SP(Streaming Processor),而一颗 nVidia 的 GPU 里,会 ...

  4. 我的第一个JApplet-绘制笑脸

    初学Java,有很多东西都不太理解,但是我想以前初学C语言的时候也是不太懂,先参考着书上的程序写,然后用多了就自然而然的懂了! 下面来简单的介绍一下我自学的第一个Java小应用程序-绘制笑脸,下面是源 ...

  5. linux文件权限详解

    一.文件和目录权限概述在linux中的每一个文件或目录都包含有访问权限,这些访问权限决定了谁能访问和如何访问这些文件和目录. 通过设定权限可以从以下三种访问方式限制访问权限:只允许用户自己访问:允许一 ...

  6. ThinkPHP 快速入门

    1. 框架简介 框架是程序结构代码的集合,而不是业务逻辑代码.集合中包含了很多类.函数和功能类包.这个集合是按照一定标准组成的功能体系.体系有很多设计模式,比如MVC等. 2. ThinkPHP框架学 ...

  7. 基于粒子群算法求解求解TSP问题（JAVA）

    一.TSP问题 TSP问题(Travelling Salesman Problem)即旅行商问题,又译为旅行推销员问题.货郎担问题,是数学领域中著名问题之一.假设有一个旅行商人要拜访n个城市,他必须选 ...

  8. S2SH+Hibernate search出现的问题

    一  java.lang.NoSuchMethodError: org.hibernate.engine.transaction.spi.TransactionEnvironment.getJtaPl ...

  9. php获取机器网卡的物理（MAC）地址

    <?php /** 获取网卡的MAC地址原码:目前支持WIN/LINUX系统 获取机器网卡的物理(MAC)地址 **/ class GetMacAddr{ var $return_array = ...

  10. linux 环境下java环境配置

    vi + /etc/profile向文件里面追加以下内容:JAVA_HOME=/usr/local/java7JRE_HOME=/usr/local/java7/jrePATH=$PATH:$JAVA ...