Can not share data between controllers AngularJs

Question

Hi I`m new in AngularJS. This is my index.html file http://clip2net.com/s/3oknPG6

<!doctype html>
<html ng-app="app">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Angular route</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="author" href="humans.txt">
         <script src="angular.js"></script>
        <script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
        <script src="app/app.js"></script>
        <style>
        body {
            padding: 20px;
        }
        </style>


    </head>
    <body>
    <div ng-view></div>

    <script src="js/main.js"></script>

    </body>
</html>

This is app.js file:

angular.module("app", ["ui.router"])


.config(function config($stateProvider){
        $stateProvider.state("index", {
            url:"",
            controller: "FirstCtrl as first",
            templateUrl: "templates/first.html"
        })
    })

.controller("FirstCtrl", function FirstCtrl(){
            var first = this;
            first.greeting = "First";
        });

and first.html file:

<input type="text" ng-model="first.greeting"/>
    <div ng-class="first.greeting">{{first.greeting}}</div>

I can not get data in the view, please help me to solve this issue. Also I`m getting this error: Cannot read property 'isDefined' of undefined.

http://stackoverflow.com/a/14168699/4161269 – Anik Islam Abhi Oct 03 '15 at 06:15 — Anik Islam Abhi, Oct 03 '15 at 06:15
@AnikIslamAbhi That is bit advance level stuff. – brute_force Oct 03 '15 at 06:21 — brute_force, Oct 03 '15 at 06:21

score 0 · Answer 1 · answered Oct 03 '15 at 06:21

0

You are loading your 'ui-router' dependancy twice in your index.html. Maybe that is the problem? Just load your ui router after you have included angular.min.js.

answered Oct 03 '15 at 06:21

Tarun Dugar

8,921
8
42
79

score 0 · Answer 2 · answered Oct 03 '15 at 06:48

I believe the problem is with configuration...

controller: "FirstCtrl as first"

There is a controllerAs field that you can use. Try this:

controller: "FirstCtrl"
controllerAs: "first"

That should hopefully fix the issue around "isDefined" of undefined. Angular will literally be looking for a controller named "FirstCtrl as first".

Hope this helps.

score 0 · Answer 3 · answered Oct 03 '15 at 08:44

What is <script src="js/main.js"></script>and also <script src="app/app.js"></script>and also you have loaded ui-router twice, remove <script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script> also i am not sure what you are trying to achieve in your view first.html file by writing

ng-class="first.greeting"

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added. More Info on ng-class

Can not share data between controllers AngularJs

3 Answers3