CODEWITHSUNDEEP
javascriptangularjs
railsuser400
railsuser400

Reputation: 1023

Simple AngularJS example

I have set up some simple AngularJS that I cannot seem to get to work. My view has:

<section ng-app="myApp">
  <header class="content_header">
    <h1>Cool App</h1>
  </header>

  <div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{yourName}}!</h1>
  </div>

  <div ng-controller="AppCtrl">
    <h1>Message: {{message}}</h1>
  </div>

</section>

Inside angular_main.js I have:

window.app = angular.module('myApp', ['ngResource']);

Inside app_ctrl.js I have:

app.controller('AppCtrl', [
  '$scope', function($scope) {
    return $scope.message = "Angular Rocks!";
  }
]);

The JavaScript is loaded in the right order:

  1. Angular Library
  2. angular_main.js
  3. app_ctrl.js

If I change <section ng-app="myApp"> to just <section ng-app> then the Hello World form works but the scope message never works.

What am I missing?

Upvotes: 1

Views: 1856

Answers (5)

PRABHU CR
PRABHU CR

Reputation: 1

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="/Scripts/myApp.js"></script>

Upvotes: 0

Srinivas
Srinivas

Reputation: 23969

    (function (angular) {
        "use strict";

        angular
            .module("employee", ["ngSanitize", "ngFileUpload", "smart-table", "ui.bootstrap", "ui.router", "ui.select"]);
    })(angular);

(function (angular) {
    "use strict";

    var config = ["$httpProvider", "$stateProvider", "$urlRouterProvider",
        function ($httpProvider, $stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/");

            $stateProvider
                .state("EmployeeList", {
                    url: "/employees",
                    templateUrl: "/Employee/List",
                    controller: "EmployeeListController"
                })
}];

    angular
        .module("employee")
        .config(config);
})(angular);

Upvotes: 0

Neikos
Neikos

Reputation: 1980

I have created you a fiddle that shows one way you could solve this: http://jsfiddle.net/KB2U4/2/

What I did:

I loaded the angular-resource file. Did you have it?

I removed the global. You do not need it, use angular.module("myApp"). Note how I did not declare any dependencies. This way you get the module back and do not pollute the global namespace.

The code:

HTML stays is the same.

angular.module('myApp', ["ngResource"])

//The following can also be in another file as long as it is loaded afterwards

angular.module('myApp').controller("AppCtrl", ["$scope", function($scope){

   $scope.message = "This is a message"; 

}]);

Upvotes: 0

Hassan Siddique
Hassan Siddique

Reputation: 1590

you don't need to return the $scope var. 

window.app = angular.module('myApp', []);
app.controller('AppCtrl', function ($scope) {
    $scope.message = "Angular Rocks!";
});

See the fiddle example http://jsfiddle.net/imhassan66/dEFfK/

Upvotes: 0

hawk
hawk

Reputation: 5408

By default any angular controller returns $scope by default. So you do not need to specify return explicitly. Try this:

app.controller('AppCtrl', [
  '$scope', function($scope) {
    $scope.message = "Angular Rocks!";
  }
]);

Upvotes: 1

Related Questions