jquery function to angular instruction implementation example

Source: Internet
Author: User

At first it was like the following: A small star shown below

The initial implementation is to add JS script in the HTML page, but foreigners do not like this, we must turn to angular instructions, so try to Bai ~

First, the original way of realization

<! DOCTYPE html>

Second, change to angular instruction form (using REQUIREJS)

Description: I use the third-party plugin jquery.raty.min.js (scoring plugin) here, it is to rely on jquery.

Directive.js

Starsdefine ([' angular ', ' raty '], function (angular) {        var directives = angular.module (' directives ', []);    Directives.directive (' Showstars ', function () {        return {            restrict: ' A ',            controller: [' $scope ', ' $element ' , ' $timeout ', function ($scope, $element, $timeout) {                $timeout (function () {                                        $.fn.raty.defaults.path = ' img ');                                        $ ($element). Raty ({                        number:5,                        score:3,                        half:false,                        size:30                    });                }            ]        };    });    return directives;});


Three, Requirejs generally have a main.js file as the starting point, here is no exception

Main.js

Configuration dependent require.config ({    paths: {      "angular": "angular", "      jquery": "Jquery.min",      "Raty": " Jquery.raty.min "    },    shim:{        " angular ": {            " deps ": [],            " exports ":" Angular "        },        " jquery ": {            " deps ": [],            " exports ":" jquery "        },        " Raty ": {            " deps ": [" jquery "],            " exports ":" Raty "        }}"  );//Manually start the corresponding module require ([' angular ', ' controller ', ' directive '), function (angular) {    Angular.bootstrap (document, [' helloctrls ', ' directives ']); });

Note: Here I use the manual start method, the HTML page removes the ng-app instruction, instead automatically starts as follows:

define ([        ' angular ',        ' controller ',        ' directive '        ), function (angular) {                  angular.module (' Hellomodel ', [' helloctrls ', ' directives ']);        return {            angularmodules: [' Hellomodel '        };                });

but, unfortunately, instead of starting from the time always said can not instantiate Hellomodel (the page I added ng-app= "hellomodel") I suspect is the JS file loading order, but later found out what the problem ah, especially tangled, Now still unresolved, if anyone can tell me the reason is greatly appreciated!


Iv. Use the above custom directives in the page

Index.js

<! DOCTYPE html>

V. Description

The above controller is not related to the directive, I am testing, of course, it is better to post.

Controller.js

define ([' angular '], function (angular) {    var componentctrls = angular.module (' Helloctrls ', []);     Componentctrls.controller (' Helloctrl ', [' $scope ', function ($scope) {        $scope. greet = "Hello World";      }]);    return componentctrls;});


Is the use of the third just plug-in reason can only be changed to manually start it? Solving....



jquery function to angular instruction implementation example

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.