mini-timeDirectivez

  • q5_402070
    了解作者
  • 4.3KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-15 03:11
    上传日期
小时间指令 ##Objectives 这个迷你项目的目的是让你习惯于创建自定义指令。 自定义指令是 Angular 最强大的方面之一,因为它们允许您创建可重用的组件。 ###步骤 1:角骨架 Fork 这个 repo,然后克隆你的 fork。 创建 Angular 应用程序的基础。 你的文件结构应该是这样的 mini-routing index.html js app.js mainCtrl.js timeDirective.js 请记住在您的 html 中包含 ng-app 并将您的模块称为“timeApp”。 另外,请记住将 Angular CDN 作为脚本与 app.js、mainCtrl.js 和 timeDirective.js 一起包含在 HTML 中。 继续并在您的 app.js 文件中创建您的“timeApp”模块
mini-timeDirectivez-master.zip
  • mini-timeDirectivez-master
  • main.html
    24B
  • index.html
    522B
  • js
  • mainCtrl.js
    93B
  • timeDirective.js
    283B
  • app.js
    218B
  • friends
  • friendsCtrl.js
    140B
  • friends.html
    20B
  • README.md
    3.8KB
内容介绍
mini-timeDirective ================== ##Objectives The purpose of this Mini Project is to get you used to creating custom Directives. Custom directives are one of the most powerful aspects of Angular because they allow you to create re-usable components. ###Step 1: Angular Skeleton * Fork this repo, then clone your fork. * Create the basics of your Angular application. Your file structure should look like this ``` mini-routing index.html js app.js mainCtrl.js timeDirective.js ``` Remember to include ng-app in your html and call your module 'timeApp'. Also, remember to include the Angular CDN as a script in your HTML along with app.js, mainCtrl.js, and timeDirective.js. Go ahead and create your 'timeApp' module in your app.js file. ###Step 2: Add your name to $scope * Head over to your mainCtrl.js file and create a controller called mainCtrl then add a property on $scope called name and set it equal to your name. * Head over to your index.html and add 'Hello, ' + whatever the name property on your controller is. ###Step 3: Directive Time * Below where it says 'Hello, ' + your $scope.name variable, add the following directive ```<show-time></show-time>``` * This directive is going to display 'The current time is ' + whatever the current time is. Although this is a small example, think of the bigger picture here. Now we can throw in this ```<show-time></show-time>``` directive anywhere in our application without having to recreate code. * Now it's time to actually build the directive. Double check that you're not getting any errors in your console before we move on. * Head over to timeDirective.js * Go ahead and get your module, setting it equals to a variable called 'app' * Now, add a directive property onto your app giving it a string, which represents the name of your directive, call it 'showTime' as the first argument. The second argument is a callback function that will return an object. The skeleton of your directive should look something like this. ```javascript app.directive('showTime', function(){ return { } }); ``` * Now what we want to do is give our directive certain properties. The first one is we want to make sure it's only used as an element, ie ```<show-time>```. You do this by setting ```restrict: 'E' ``` in the object that's being returned from the directives callback. * The next proprty we want to give it is a template. This template is just an HTML string that will show wherever the directive is used. Add a property to the object being returned called 'template' whose value is ```<div> The current time is {{time}} </div>``` * What we're going to do now is use the link method to get the current time, then upate scope.time which will in turn update the template. * Add a method onto your returned object called link. Remember, this link method is where you want to put all your DOM manipulation for JavaScript. * The link value usually takes three parameters. scope, element, and attrs. Add those as parameters now * Now create a variable called currentTime and set it equal to ```new Date()```, which is just the current time. * Now, add a property on scope called time which is equal to ```currentTime.toString``` * If you did everything right reload your index.html page and you should see something like ``` Hello, Tyler The current time is Sun Dec 07 2014 22:03:12 GMT-0700 (MST) ``` * If you don't see that, check your console and start debugging. * Your final timeDirective.js file should look like this ```javascript var app = angular.module('timeApp'); app.directive('showTime', function(){ return { restrict: 'E', template: '<div> The current time is {{time}} </div>', link: function(scope, element, attrs){ var currentTime = new Date(); scope.time = currentTime.toString(); } } }); ```
评论
    相关推荐
    • angular-registration
      将脚本加载到HTML中。 < script src =" bower_components/angular-registration/registration/scripts/registration.js " > </ script > < script src =" bower_components/angular-registration/...
    • angular-friends
      角友 介绍 我们将创建一个可搜索的,可过滤的朋友列表。 设置 分叉并克隆此仓库 包括一个角度脚本标签 ... 如果没有空数组参数,angular会尝试找到myApp模块,而不是创建一个新模块。 将ng-app属性添加
    • Angular-componentization
      如果按角度使用新路由器,这将是一个标准,并且是确保轻松过渡到Angular 2的好方法。所有或几乎所有东西都是组件。 组件基本上是一个自包含的应用程序。 它具有自己的样式,模板,控制器,路由,规格等。所有内容都...
    • preview-angular
      index.html 表示 → 次の画面(SampleapplicationCtrl)oポチる $rootScope $stateChangeStart - main.controller.js:14 $rootScope $viewContentLoading - main.controller.js:31 messageService 启动 - message...
    • angular上传文件
      主要看examples下的image-preview的index.html 这个有图片预览,喜欢用这个 然后看对应的controlle.js 里面都备注好了(也没多少),只要改下 请求的接口就好了, 其他的就是引入正确就能用了。
    • angular-intro
      我的介绍性 AngularJS 演示文稿中的示例。 在浏览器中打开 index.html
    • angular-friends
      ###步骤1:安装Angular角度脚本已包含在项目中。 在第一步中,您将创建一个应用程序变量和FriendController。 我们已经提供了适当的文件并为您概述了结构。 在app.js中为您的角度应用程序创建一个应用程序变量(这...
    • angular-1.3.15
      AngularJS是为了克服HTML在构建应用上的不足而设计的。 HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。 翻过去下的哦!
    • angular-friends
      ###Step 1:安装 Angular 项目中已经包含了 Angular 脚本。 在第一步中,您将创建一个应用程序变量和您的 FriendController。 我们已经提供了适当的文件并为您概述了结构。 在 app.js 中为你的 angular 应用创建一...
    • portafolio-angularAngular HTML信息库
      Portafolio 该项目是使用版本10.0.7生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件,该应用程序将自动重新加载。...要获得有关Angular CLI的更多帮助,请使用ng help或查看 。