Sunday, February 14, 2016

Angular JS bare minimal - index,html, module, controller

http://jsfiddle.net/E9bU5/3/

{
"name": "ASP.NET",
"private": true,
  "dependencies": {
    "angularjs": "~1.5.0",
    "bootstrap": "~3.3.6",
    "jquery": "~2.2.0",
    "jquery-validation": "~1.14.0",
    "jquery-validation-unobtrusive": "~3.2.5",
    "underscore": "~1.8.3"
  }

}



index.html

<!doctype="html">
<html>
<head>
    <title>the world</title>
    <script src="lib/angularjs/angular.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controller.js"></script>

</head>
<body ng-app="app">
    <h2>The worldf</h2>

    <div ng-controller="controller as vm">
        {{ vm.name }}
    </div>

    <p>this web site</p>
</body>
</html>

app.js --- module (difference between module and controller is module is a setter with [])

function () {
    'use strict';

    //creating module
    angular.module('app', []);
})();

controller.js -- controller

(function () {
    'use strict';

   //getting existing module
    angular
        .module('app')
        .controller('controller', controller);

    //controller.$inject = [''];

    function controller() {
        /* jshint validthis:true */
        var vm = this;
        vm.name = 'greg';
   
    }
})();



No comments:

Post a Comment