Multiple Controller throwing error in my Angular JS application - javascript

I am a beginner in Angular JS. I know that below declaration is required in the js file to make angular JS Controller work.
var app = angular.module('myApp', []);
app.controller('ctrlOne', function(){
});
But recently got some code from internet where the declaration is not made for the app and controllers like above. But there are only controller function defined, still working fine but not in my case.
function ctrlOne($scope){
};
function ctrlTwo($scope){
};
Please find my code below and output. Please correct me.
<div ng-app>
<input type="text" ng-model="data.message" />
<h1>{{ data.message }}</h1>
<div ng-controller="ctrlOne">
<input type="text" ng-model="data.message" />
<h1>{{ data.message }}</h1>
</div>
<div ng-controller="ctrlTwo">
<input type="text" ng-model="data.message" />
<h1>{{ data.message }}</h1>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="App.js"></script>
App.js:
function ctrlOne($scope){
};
function ctrlTwo($scope){
};
Please can any one help me to figure out where I went wrong. Your advice's are welcomed.
Please find JSFIDDLE Link : Have done above coding here

Change your html to include myApp module name like so:
<div ng-app="myApp">
...
<div ng-controller="ctrlOne">
<input type="text" ng-model="data.message" />
<h1>{{ data.message }}</h1>
</div>
...
</div>
Angular needs to know what is the name of your root module. ng-app directive specifies just that:
Use this directive to auto-bootstrap an AngularJS application. The
ngApp directive designates the root element of the application and is
typically placed near the root element of the page - e.g. on the
<body> or <html> tags.

There are two ways of initializing an angular app. One is to define ng-app in html or you can manually bootstrap angular app.
You need to figure out where is the app getting initialized. Because in your html you are using ng-app=''. you should provide it with app name.

Related

How same variable is used for ng-bind and ng-model

I am exploring AngularJS1 and found something strange, please help me to find how name is working for both ng-bind and ng-model here.
Output is coming as :John Doe but it is working for same variable name with bind and model there it is confusing me.Please help me to understand.
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>{{name}}</h1><br>
<p ng-bind="name"></p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
They are all the same variable. You have $scope.name and you're telling ng-bind and ng-model to use $scope.name;
ng-model="name" <-- Angular looks on the scope object for a property called name. If it's there it uses it, if it's not, it'll create it.
ng-bind="name" <-- Angular looks on the scope for a property called name. Then uses that value.
Angular created a scope object for the div with ng-controller
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>{{name}}</h1><br>
<p ng-bind="name"></p>
</div>
All directives with-in that div's hierarchy can access the scope object.
If you Google "Understanding Angular scopes" or something similar you'll get a lot of articles on it.
http://blog.carbonfive.com/2014/02/11/angularjs-scopes-an-introduction/

Why I can not acces $scope value from MainController within index.cshtml?

I am trying to create AngularJS, MVC ASP.Net single page application so
I have created new folder within my project which contains
app.js:
var myApp = angular.module('app', []);
and another folder containing MainController.js:
myApp.controller("MainController",['$scope', function ($scope) {
$scope.naslov = "MP3 Manager"}]);
next, inside Views/Home I have added this in my div tag
ng-app="app" ng-controller="MainController"
and finally I got this:
<div class="row" ng-app="app" ng-controller="MainController">
<div class="col-md-6">
<h2>Pjesme</h2>
<p>{{ naslov }}</p>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-6">
<h2>Playliste</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
when I run this app it shows {{ naslov }} instead of "MP3 Manager"
https://imgur.com/L1gmSBz
Why is this happening?
Make sure you have a reference to Angularjs, your app and your controller. I usually put the Angularjs reference and my app reference in my Layout.cshtml page, then the controller reference on the .cshtml page.
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/MainController.js"></script>
You need all three.
maby you can try <p ng-model="naslov ">{{naslov }}<p>
Firstly I agree with Martin Welker. You can't declare ngApp and ngController on the same element. It is not good practice.
Secondly check whether Angular is properly loaded. You could have a problem in your BundleConfig.cs file. Small typos can cause these silly errors.
Run it and check your browser console for any errors.

Nested App inside controller in angularJS

how can I achieve that structure in AnglularJS ?
<body ng-app="mainBodyAppWrapper">
<div ng-controller = "mainBodyController">
<div ng-app="myApp">
<div ng-controller="controller3">
First Name : <input ng-model="myApp_fName3" type="text"/>
Last Name : <input ng-model="myApp_lName3" type="text"/>
Hello {{myApp_fName3}} {{myApp_lName3}} !!!
</div>
<hr/>
</div>
</div>
</body>
in that case I have an error https://docs.angularjs.org/error/ng/areq?p0=controller3&p1=not%20a%20function,%20got%20undefined
Any one know about that kind of error solution? Please help me out
You cannot use multiple ng-app in a page. If you really need to use multiple modules, consider bootstraping the second module. For more info, read How to define two angular apps / modules in one page

Load angular template on some event

I'm quite new to angular and frontend in general, but what i'd like to see is something similar to what routing with ngView gives, but without routing, i.e just load a template on some event. To be more specific, let's say i have an input field somewhere in the header and when i click/focus on this field a special panel with different input options shows up. The trick is that this input field and other elements are already a part of a template which is loaded into ngView, so as i understand i can't use another ngView for options pane.
use ngIf, ngShow, ngHide, ngSwitch for stuff like that
<button ng-click="showStuff = true">Show Stuff</button>
<button ng-click="showStuff = false">Hide Stuff</button>
<div ng-show="showStuff">Showing Stuff</div>
<div ng-hide="showStuff">Hiding Stuff</div>
Have a look at this plunker for a quick and dirty, working example.
Note that the showStuff variable is just magically created by angular on the root scope, since I'm not using a controller.
You can load templates with ng-if and ng-include like this example:
<body ng-app="app">
<div class='container'>
<button ng-click='tmpl = true' class='btn btn-info'>Load template!</button>
<div ng-if='tmpl'>
<div ng-include="'template.html'"></div>
</div>
</div>
</body>
The ngIf directive will add element to the DOM when the argument expression is true. Then, the angular will compile the inner directive ngInclude, loading the template.

Scope problems in basic Yeoman Angular Todo App

I'm following the tutorial here: http://www.youtube.com/watch?v=iUQ1fvdO9GY while learning yeoman and angular.
I've gotten to here http://www.youtube.com/watch?v=iUQ1fvdO9GY#t=266 and where his example works, mine does not due to some scope problems.
main.html
<div class="jumbotron">
<h2>My Todos:</h2>
<p ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span>{{todo.text}}</span>
</p>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodoText" size="20">
<input type="submit" class="btn btn-primary" value="add">
</form>
</div>
main.js
'use strict';
var myApp = angular.module('todoAppApp');
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.todos = [
{text: 'Item 1', done: false},
{text: 'Item 2', done: true},
{text: 'Item 3', done: false}
];
$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodoText, done: false});
$scope.newTodoText = '';
};
}]);
For some reason, though, the newTodoText variable is in a scope that is child to the $scope in main.js. This is confirmed using Batarang. I can't post a picture due to lack of rep, but in Batarang, there's:
Scope001 > Scope002 > Scope003(which is the $scope I have access to in the js) > Scope004 > {Scopes for each of the todos}
Scope003 has the original todos array and the addTodo() function. Scope004 has the newTodoText text when you type into the input form. On clicking add, addTodo() is correctly called, but $scope doesn't contain newTodoText because it's in Scope004.
I'm obviously missing something simple here due to my newness to the framework and the practically barebones implementation here. My Google-fu has turned up few results.
EDIT:
Ok, so in index.html, it contains the line
<div class="container" ng-include="'views/main.html'" ng-controller="MainCtrl"></div>
which includes main.html. I've replaced that line with the literal contents of main.html enclosed in the div
<div class="container" ng-controller="MainCtrl">
<!-- contents of main.html from above -->
</div>
And magically my scope problems are solved. Why does including main.html from a separate file mess with the scope?
EDIT #2
Cool, I figured it out.
Turns out that ng-include creates a new scope, which is contrary to what I thought it did (I had assumed that it was equivalent to a literal html injection). So I just moved the ng-controller="MainCtrl" from the .container div in index.html (Scope003) to the .jumbotron div within main.html.
Thanks for the help, and I'm a lot more knowledgeable about scope now!
ng-include creates a new scope. So I moved the ng-controller="MainCtrl" from the .container div in index.html (Scope003) to the .jumbotron div within main.html.

Categories