jquery function to angular instruction implementation example

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