search

ITHelpself / AngularJS

0 stars 0 forks source link

2. Common angular constructs #2

Open ITHelpself opened 4 years ago

ITHelpself commented 4 years ago 
<!DOCTYPE html>
<html ng-app="myDemoApp">

<head>
    <style>
        .started {
            background: gold;
        }
    </style>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>
        function MyDataService() {
            return {
                getWorlds: function getWorlds() {
                    return ["this world", "another world"];
                },
            };
        }

        function DemoController(worldsService) {
            var vm = this;
            vm.messages = worldsService.getWorlds().map(function(w) {
                return "Hello, " + w + "!";
            });
        }

        function startup($rootScope, $window) {
            $window.alert("Hello, user! Loading worlds...");
            $rootScope.hasStarted = true;
        }
        angular
            .module("myDemoApp", [
                /* module dependencies go here */
            ])
            .service("worldsService", [MyDataService])
            .controller("demoController", ["worldsService", DemoController])
            .config(function() {
                console.log("configuring application");
            })
            .run(["$rootScope", "$window", startup]);
    </script>
</head>

<body ng-class="{ 'started': hasStarted }" ng-cloak>
    <div ng-controller="demoController as vm">
        <ul>
            <li ng-repeat="msg in vm.messages">{{ msg }}</li>
        </ul>
    </div>
</body>

</html>

---:))

ITHelpself commented 4 years ago

angular.module(...) used with an array as the second argument creates a new module. This array is used to supply a list of module dependencies. In this example we chain calls on the result of the module(...) function

ITHelpself commented 4 years ago

.service(...) creates an Angular Service and returns the module for chaining;

ITHelpself commented 4 years ago

.controller(...) creates an Angular Controller and returns the module for chaining;

ITHelpself commented 4 years ago

.config(...) Use this method to register work which needs to be performed on module loading.

ITHelpself commented 4 years ago

.run(...) makes sure code is run at startup time and takes an array of items as a parameter. Use this method to register work which should be performed when the injector is done loading all modules.

ITHelpself commented 4 years ago

ng-class is the ngClass directive to set a dynamic class, and in this example utilizes hasStarted on the $rootScope dynamically

ITHelpself commented 4 years ago

ng-cloak is a directive to prevent the unrendered Angular html template (e.g. "{{ msg }}") to be briefly shown before Angular has fully loaded the application

ITHelpself commented 4 years ago

ng-controller is the directive that asks Angular to instantiate a new controller of specific name to orchestrate that part of the DOM;

ITHelpself commented 4 years ago

ng-repeat is the directive to make Angular iterate over a collection and clone a DOM template for each item;

ITHelpself commented 4 years ago

{{ msg }} showcases interpolation: on-the-spot rendering of a part of the scope or controller;