Why my $scope is not accessible in my controller - Angular JS? - javascript

I am not able to get declared scope variable in my controller. Instead I'm getting reference error : message is not defined
Below is my code:
My Index.html
<body ng-app="myApp" ng-controller="homingController" ng-cloak>
<script type="text/javascript">
angular.module('myApp' ['ngRoute','ngMaterial']).controller('homingController', ['$scope',
function($scope){
$scope.message = 'Hello';
}
]).config(function ($routeProvider) {
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "homingController"
}).when("/monitor", {
templateUrl: "monitor.html",
controller: "monitoringController"
}).otherwise({
redirectTo: '/home'
});
}).controller('monitoringController', function ($scope) {
$scope.message = "Monitor";
});
</script>
<nav class = "navbar navbar-inverse" role="navigation">
<ul class = "nav navbar-nav" >
<li ><img src="./images/home.svg">Home</li>
<li >Monitor</li>
<li ><a class = "active" ui-sref = "Audit" ><img src="./images/audit.svg">Audit</a></li>
<li ><a class = "active" ui-sref = "configuration" ><img src="./images/configure.svg">Configure</a></li>
</ul>
</nav>
</div>
</body>
<div ng-view></div>
My home.html
{{ message}}
/*This line giving error in console : angular.js:14328 ReferenceError: $scope is not defined
*/
Is there anything I am missing here?

Your <div ng-view></div> should be inside your <body> tag. By placing it outside of the body, in which you define your app, the views have no idea what app or controller they should be using.
You also don't need to identify ng-controller's anywhere around your views, since you define them in your routeconfig:
var app = angular.module('myApp' ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "home.html",
controller: "homingController"
}).when("/monitor", {
templateUrl: "monitor.html",
controller: "monitoringController"
}).otherwise({
redirectTo: '/home'
});
});
app.controller('homingController', function($scope) {
$scope.message = 'Hello';
})
app.controller('monitoringController', function($scope) {
$scope.message = "Monitor";
});
If you want to display something from one of your controllers you should define it like so:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="homingController">
{{message}}
</div>
<nav class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
Monitor
</li>
</ul>
</nav>
<div ng-view></div>
</body>
With your home.html & monitor.html containing {{ message }}. An exact example of this can be found at w3Schools (Under the heading "Controllers"). Build that, then once you have that working start expanding on it to fill in the rest of your application.

Related

$location.path change url but no redirecting

I want to redirect to another page by clicking a button, but when I click on a button, URL is changed, but it is not redirected, I have to refresh the page with new URL. The same is also happening when I click on link.
locationController.js
angular.module('reservationModule').controller('locationController', function($scope, $location){
$scope.setLocation = function (url) {
$location.path(url);
};
})
reservationModule.js
(function () {
var resModule = angular.module('reservationModule', ['ngRoute']);
resModule.controller('HomeController', function ($scope) { // here $scope is used for share data between view and controller
$scope.Message = "Yahoooo! we have successfully done our first part.";
});
resModule.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/Home/Index.cshtml',
controller: 'locationController'
})
.when('/Home/Index', {
templateUrl: '/Home/Index.cshtml',
controller: 'locationController'
})
.when('/Home/Registration', {
templateUrl: '/Home/Registration.cshtml',
controller: 'registerController'
})
.when('/Home/Login', {
templateUrl: '/Home/Login.cshtml',
controller: 'loginController'
})
.otherwise({ redirectTo: '/' });
});
})();
Index.cshtml
#{
// Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Webový rezervační systém";
}
<base href="/">
<div class="container" ng-controller="locationController">
<header class="header">
<div class="headerleft">
<div class="headerlogo">
<img alt="reservation" src="../Content/pics/vetstoria-logo.jpg" width="50" height="50">
</div>
</div>
<div class="headerright">
<p class="headerlogintext">
<a class="btn headerlogin" href="/Home/Login" style="text-decoration:none">Přihlašte se</a>
</p>
</div>
</header>
<div class="content">
<h1 class="content-title">Webový rezervační systém</h1>
<p class="content-title-text">V našem rezervačním systému se můžete rezervovat na cokoliv chcete. Ať už si chcete rezervovat sportoviště, nějaký kurz nebo jiné, u nás to jde snadno.</p>
<p class="content-title-text">Pro začátek vám stačí jediné.</p>
<button class="btn-big" ng-click="setLocation('/Home/Registration')">Registrovat</button>
</div>
<!-- <ul class="menuUl">
<li>#Html.ActionLink("Register", "Registration")</li>
</ul>-->
#section Scripts{
<script src="~/Scripts/Angular_Controllers/locationController.js"></script>
}
I read some topics about this, but I don't know, if an error is in the module, or in the controller.
I had a similar issue. The template url should point to ".html" rather than ".cshtml". When you try to access files inside the Default Folders created by Visual Studio, for some reason you cannot access it. So try changing your path.

ng-repeat not displaying items

i have a weird bug in my angular app where the data in my ng-repeat is not displaying but if i refresh the page and navigate to my home page it quickly flickers into view then disappears, im not sure why this is happening can someone help me out?
thanks in advance
appRoutes.js
angular.module('appRoutes', []).config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'views/home.html',
controller: 'MainController'
})
// characters page that will use the CharactersController
.when('/characters', {
templateUrl: 'views/characters.html',
controller: 'CharactersController'
});
$locationProvider.html5Mode(true);
}]);
CharactersCtrl.js
angular.module('CharactersCtrl', []).controller('CharactersController', function($scope) {
$scope.init = function(){
$scope.getCharacters();
}
$scope.getCharacters = function(){
$.ajax({
url:'https://gateway.marvel.com/v1/public/characters?apikey=APIKEY',
success:function(response){
$scope.characters = response.data.results;
console.log($scope.characters);
},
fail:function(){
}
});
}
$scope.init();
});
characters.js
<div>
<div class="text-center">
<h1>Characters</h1>
</div>
<section id="character-section" class="row">
<figure class="columns small-3" ng-repeat="hero in characters">
<!-- <img ng-src="{{hero.thumbnail.path}}" alt="{{hero.name}}-image"> -->
<figcaption>
{{hero.name}}
</figcaption>
</figure>
</section>
</div>
index.html
<body ng-app="marvelApp">
<!-- HEADER -->
<header>
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="/">Stencil: Node and Angular</a>
</div>
<!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
<ul class="nav navbar-nav">
<li>characters</li>
</ul>
</nav>
</header>
<!-- ANGULAR DYNAMIC CONTENT -->
<main ng-view ></main>
</body>
app.js
angular.module('marvelApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'CharactersCtrl', 'CharactersService']);
You are using jQuery ajax. Angular does not automatically update variable when modified outside the Angular scope (in this case, $scope.characters is modified using jquery ajax);
I sugges you use the $http service provided by angular for making ajax calls.
But if you insist in using jquery ajax, you can wrap this code $scope.characters = response.data.results; with
`$scope.$apply(function(){
})`
Result:
$scope.$apply(function(){
$scope.characters = response.data.results;
})

Ionic: How to Open a view on click?

I have created following main screen. On clicking each link it has to open corresponding view.
So far I have written:
index.html
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Checkout</h1>
</ion-header-bar>
<ion-content>
<div class="row blue-bg">
<div class="col col-50 white">
<ul class="list-inline">
<li>Catalog</li>
<li>Inventory</li>
<li>Dashboard</li>
<li>Transaction</li>
</ul>
</div>
<div class="col col-40 white">Logo</div>
<div class="col col-10 .col-offset-25 white">Right</div>
</div>
</ion-content>
</ion-pane>
</body>
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
controllers.js
angular.module('starter.controllers', [])
.controller('PaymentListCtrl', function ($scope) {
$scope.productItems = [
{
name: 'Product 1',
price: '$50.00'
},
{
name: 'Product 2',
price: '$45.00'
}
]
})
Please note I am new in both Ionic and Angular. If you can provide a simple to use method then would be greatful
try to define state and redirect your view
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Checkout</h1>
</ion-header-bar>
<ion-content>
<div class="row blue-bg">
<div class="col col-50 white">
<ul class="list-inline">
<li>Catalog</li>
<li>Inventory</li>
<li>Dashboard</li>
<li>Transaction</li>
</ul>
</div>
<div class="col col-40 white">Logo</div>
<div class="col col-10 .col-offset-25 white">Right</div>
</div>
<ion-nav-view></ion-nav-view>
</ion-content>
</ion-pane>
</body>
Define your view in another page
view1.html
<ion-view view-title="Admin">
<ion-content class="padding text-center">
//define your content here
</ion-content>
</ion-view>
in app.js define state like this
.state('main', {
url: '/index',
abstract: true,
templateUrl: '{{yourpath}}/index.html'
})
.state('main.view', {
url: '/view',
templateUrl: '{{yourpath}}/admin.html',
})
may be this can help you
I just made a simple and clear demo.
Index.html:
<body ng-controller="MainCtrl">
<!-- Make a fancy menu here -->
Welcome
Exit
<!-- The templates will be inserted here -->
<ng-view></ng-view>
</body
App.js:
var app = angular.module('plunker', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'welcome.tmpl.html',
controller: 'welcomeCtrl'
}).
when('/goodbye', {
templateUrl: 'goodbye.tmpl.html',
controller: 'goodbyeCtrl'
});
}]);
app.controller('MainCtrl', function($scope) {
//Code goes here
});
app.controller('welcomeCtrl', function($scope) {
$scope.welcome = "Welcome to the 'Welcome' page";
});
app.controller('goodbyeCtrl', function($scope) {
$scope.goodbye = "Goodbye? I guess?";
});
And ofcourse we need the template to insert and those are just 2 simple .html files which not containt <html>, <head> and <body>.
Hope you got enough information, if not jus let me know.
You can get some help from this JSFiddle
Actually copied from this JSFiddle
angular.module('ionicApp', ['ionic'])
.controller('HomeCtrl', function($scope, $ionicModal) {
////.....
$scope.triggerViewUpdate = function() {
// JSFiddle didn't seem to like ng-template script tags...
$ionicModal.fromTemplate('<ion-modal-view>...Content...</ion-modal-view>').show();
};
})
HTML:
<button class="button button-positive button-block button-outline" ng-click="triggerViewUpdate()">Trigger View update</button>

$rootScope to set active tab not working

would anyone be able to help me on this issue I am having?
I have a NavCtrl for manage my active tag, I was able to change the active tab when click on the menu item, however when I click on the link in the body views, it take me to the page I want to, but the active tag is not change.
//controller for nevigation menu
sp.controller('NavCtrl', ['$scope', 'auth', '$window','$rootScope', function ($scope, auth, $window,$rootScope) {
$scope.LogOut = auth.logOut;
$scope.isLoggedIn = auth.isLoggedIn;
$scope.tab = $rootScope.navTav;
$scope.toTop = function(){
$window.scrollTo(0, 0);
};
}]);
I try to use the $rootScope to set the navTab, but it's still not working
//setting root scope
sp.run(function($rootScope) {
$rootScope.navTav = 1;
})
ui-Router
.state('qaanswer', {
url: '/qa/{quesId}',
views: {
view50': {
templateUrl: './qa/qaanswer.html',
controller: 'QAAnswerCtrl'
},
'view60': {
templateUrl: './shareviews/activityupdates.html',
controller: 'HomeCtrl'
}
},
onEnter:['$rootScope',function($rootScope){
$rootScope.navTav = 5;
}]
Thank you so much for the help
Update HTML :
<body ng-controller="NavCtrl">
<!-- Desktop Menu -->
<div>
<div>
<ul>
<a href="#/home" ng-class="{active: navTab === 1}" ng-click="navTab = 1">
<li>Home</li>
</a>
<a href="#/qa" ng-class="{active: navTab === 2}" ng-click="navTab = 2">
<li>QA</li>
</a>
</ul>
</div>
</div>
<div>
<div>
<div class="row">
<div ui-view="view50"></div>
<div ui-view="view60"></div>
</div>
</div>
</div>
</body>
Working plunker
You can simplify your implementation and have no issues. Simply use the $rootScope variable directly in your template along side ng-class like so:
<body ng-controller="NavCtrl">
<a ng-class="{red: $root.navTab===0}" ui-sref="first">first</a>
<a ng-class="{red: $root.navTab===1}" ui-sref="second">second</a>
<div ui-view></div>
</body>
Then update $rootScope in your controllers.
.controller('NavCtrl', function($scope, $rootScope) {});
.controller('FirstCtrl', function($scope, $rootScope) {
$rootScope.navTab = 0;
});
.controller('SecondCtrl', function($scope, $rootScope) {
$rootScope.navTab = 1;
});
Your states get to stay relatively simple:
.state('first', {
url: '/first',
templateUrl: 'first.html',
controller: 'FirstCtrl'
})
.state('second', {
url: '/second',
templateUrl: 'second.html',
controller: 'SecondCtrl'
})
plunker
Ideally you would make a directive for such a task, and avoid using $rootScope. A simple way to do this is to broadcast a message whenever you land on a new page, then listen on that event in your tab directive and flip the correct tab as active.

Routing does not work in angularjs

I am very new to angular js.
I have implemented routing in angular js but it does not redirect me to the pages I have stated in the route.js
here is the code:
Route.js
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/getplaces', {
templateUrl: 'getplaces.html',
controller: 'ListCtrl',
}).
when('/getuncategorisedplaces', {
templateUrl: 'list.html',
controller: 'uncatCtrl'
})
.otherwise ({
redirectTo: '/getplaces'
});
}]);
Controller.js
function uncatCtrl($scope, $http) {
$http.get('http://94.125.132.253:8000/getuncategorisedplaces').success(function (data) {
$scope.places = data;
console.log(data);
}
)}
// get places
function ListCtrl($scope, $http) {
$http.get('http://94.125.132.253:8000/getplaces').success(function (data) {
$scope.places = data;
console.log("Successful")
console.log(data);
}
)}
HTML code includes ng view and href such as href="#getplaces"
<body ng-app="sampleApp" >
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> <a class= "linha" href="#getplaces"> Get places </a></li>
<li><a class= "linha" href="post.html"> Post a movie </a></li>
<li><a class= "linha" href="#getuncategorisedplaces">List of uncategorised places </a></li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
Check that you have both scripts included (angular and ngroute)
<script src='angular.js'>
<script src='angular-route.js'>
Then check that you are including that module in your app:
var sampleApp = angular.module('sampleApp', ['ngRoute']);
As of Angular 1.2.0, angular-route is a separate module
refer to the angular documentation:
https://docs.angularjs.org/api/ngRoute
Here is an example code that i have written a while ago.
var app = angular.module('test', ['ngRoute','ngGrid','ngBootstrap', 'http-auth-interceptor','ui.bootstrap','ngCookies','ngSanitize']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/sign-in', {templateUrl: 'partials/login/signin.html', controller: LoginCtrl}).
when('/admin/sign-in', {templateUrl: 'partials/login/userManagementSignin.html', controller: LoginCtrl}).
otherwise({redirectTo: '/dashboard'});
}]);

Categories