Here is the code for the partial view?
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Record Incident <small>Please enter important information in the audio...</small></h1>
<ol class="breadcrumb">
<li>
<h1> {{instruction}} </h1>
</li>
</ol>
</div>
</div>
Input something in the input box:
Submit
Here is the main index page
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- Angular JS Library import -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="app.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<i class="fa fa-home"></i> Home
</li>
<li>
<i class="fa fa-shield"></i> About
</li>
<li>
<i class="fa fa-comment"></i> Contact
</li>
<li>
<i class="fa fa-comment"></i> Tutorials
</li>
<li>
<i class="fa fa-comment"></i> Demo Writer
</li>
</ul>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view>
</div>
</div>
<footer class="text-center">
</footer>
</body>
This is the app.js code
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'partials/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'partials/about.html',
controller : 'aboutController'
})
// route for the tutorial page
.when('/tutorial', {
templateUrl : 'partials/tutorial.html',
controller : 'tutorialController'
})
.when('/demoWriter', {
templateUrl : 'demoWriter.html',
controller : 'demoWriterController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
scotchApp.controller('tutorialController', function($scope) {
$scope.instruction = 'This is the tutorial page.';
// Load the Google Transliterate API
});
scotchApp.controller('demoWriterController', function($scope) {
$scope.instruction = 'This is the tutorial page.';
});
The problem is that even though the expected view is partially viewed in the expected ng-view section, even after loading I want to call some javascript code. And I want to know, how to include those javascript code in the project. And how to call the javascript so that it will do the expected task. I want to convert the typed text in the tutorial partial view to sinhala. For that here is the expected javascript code...
<script type="text/javascript">
// Load the Google Transliterate API
google.load("elements", "1", {
packages : "transliteration"
});
function onLoad() {
var options = {
sourceLanguage : google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage : [google.elements.transliteration.LanguageCode.SINHALESE],
shortcutKey : 'ctrl+g',
transliterationEnabled : true
};
// Create an instance on TransliterationControl with the required
// options.
var control = new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
control.makeTransliteratable(['transliterateTextarea']);
}
google.setOnLoadCallback(onLoad);
</script>
In addition to this I have to include this script too
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Can anyone please explain me, where and how I should load the expected javascript code that has to be in that partial view which is called by the tutorialController in the app.js. Please explain me how to complete this task.
Use and ng-init to call a function on the target element. Asuming a textarea needs to be added to transliteration scope.
<textarea
ng-init="addTrnsEngine()"
id="tweet"
class="form-control primaryPostArea"
ng-model="newPost.text"
placeholder="Say something...">
</textarea>
where addTrnsEngine() is a function which adds the element to the google transliterate api.
you could send a send a unique id like in the example above or the tagName and search the document by the corresponding id or tagName. ( addTrnsEngine('tweet') )
example:
var addTrnsEngine() = function( targetId ){
var elem = document.getElementById( targetId );
//add transliteration on elem here.
}
Related
i'm new on angular js.
I have this HTML page (dowloaded from tutorial)
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
<li><i class="fa fa-comment"></i> Logout</li>
</ul>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
<footer class="text-center">
<p>View the tutorial on Scotch.io</p>
<p>View a tutorial on Animating Your Angular Single Page App</p>
</footer>
</body>
</html>
with this script.js
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'aboutController'
})
// route for the contact page
.when('/logout', {
templateUrl : 'pages/logout.html',
controller : 'logoutController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
scotchApp.controller('logoutController', function($scope) {
$scope.message = 'Logout';
});
I also have 4 simple HTML pages (home, contact, about and logout) that have the same structure like this
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
I've just added logout page, the related tags in index.html and the route within the script. but it isn't been loaded. I don't understand why.
I am trying route from home.html to profile.html .I have data in script.js which i have written in factory.when profile button is clicked, the page is routing to profile.html,but the profile.js which is written in profile.html is not executing.I have same app in profile.html and profile.js.where am i doing wrong?
home.html
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> Profile</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<div id="main">
<div ng-view></div>
</div>
</body>
script.js
// create the module and name it app
var app = angular.module('app', ['ngRoute']);
// configure our routes
app.factory("Data", function(){
return {profileName: "Hello Lucifer"};
});
app.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
});
});
// create the controller and inject Angular's $scope
app.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
app.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
profile.html(path:~/pages/profile.html)
<!DOCTYPE html>
<html ng-app="app" ng-controller="aboutController">
<head lang="en">
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="about.js"></script>
</head>
<div class="jumbotron text-center">
<span>About Page</span>
<p>{{ message }}</p>
{{ results.name}}
</div>
profile.js(path:pages/profile.js)
var app = angular.module('app');
app.controller('aboutController',['$scope', '$http',function($scope,$http,Data) {
alert("sa");
//data from api
$scope.results = Data.profileName;
});
I did not included profile.js in home.html
When I click on a link to load a ngView page, the html file does not get displayed.
I am not running the application through localhost, which I suspect could be the issue. I just opened index.html with Chrome, so perhaps ngRoute is missing some dependency?
router-app/
---index.html
---app.js
---pages/
-------home.html
-------about.html
-------contact.html
Anyways, here's my app.js
// app.js
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider){
$routeProvider
//route for home page
.when('/', {
templateURL: 'pages/home.html',
controller: 'mainController'
})
//route for home page
.when('/about', {
templateURL: 'pages/about.html',
controller: 'aboutController'
})
//route for home page
.when('/contact', {
templateURL: 'pages/contact.html',
controller: 'contactController'
})
//default route
.otherwise({
redirectTo: '/'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope){
$scope.message = 'Look! I am on the About page!';
});
scotchApp.controller('contactController', function($scope){
$scope.message = 'Shoutout! I am on the Contact page!';
});
And here is index.html
<!-- index.html -->
<!DOCTYPE html>
<html ng-app='scotchApp'>
<head>
<BASE href="/Users/Khan/Desktop/router-app/">
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
<meta charset='utf-8'>
<base href='/'>
</head>
<body>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</body>
</html>
I am very curious as to what is going on, if anyone knows. Thank you for your help! :)
Remove the leading slash from your template url,
/Pages/about.html
Should become
Pages/about.html
So I'm trying to run an Angular app with a Rails API on Chrome.
I'm trying to render very simple views from their respective controllers.
My users.js controller:
'use strict';
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
rantlyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/users', {
templateUrl: '/views/users.html',
controller: 'UsersCtrl'
});
}])
.controller('UsersCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('http://localhost:3000/api/users/').success(function(data) {
$scope.users = data.users;
});
$scope.foos = ['foo', 'bar', 'baz'];
}]);
users.html view:
<div ng-controller='UsersCtrl'>
<h1>Users</h1>
<ul ng-repeat="user in users">
<li>{{user.first_name}}</li>
</ul>
<ul ng-repeat="foo in foos">
<li>{{foo}}</li>
</ul>
</div>
The users page renders fine, and I get all the data I want. But when I try to load my main page, I get nothing. No errors, just a blank screen (though the navbar and everything else I have in my index.html loads properly).
My main.js controller:
'use strict';
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
rantlyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/views/main.html',
controller: 'MainCtrl'
});
}])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.awesomeThings = [
'foo',
'bar',
'baz'
];
$scope.addThing = function() {
$scope.awesomeThings.push($scope.newThing);
$scope.newThing = '';
};
}]);
main.html view:
<div ng-controller="MainCtrl">
<form ng-submit='addThing()'>
<div class="form-horizontal">
<input type="text" ng-model="newThing">
<input type="submit" value="Add Thing">
</div>
</form>
<li ng-repeat='thing in awesomeThings'>
{{thing}}
</li>
<h4>Awesome things: {{awesomeThings}}</h4>
<h4>Cool things: {{coolThings}}</h4>
</div>
When I look at the inspector in the Network tab for the "/users" route, it loads users.html. This doesn't happen for the "/" route. I expect it to load main.html, but I get nothing.
The strange thing is, when I copy all of my code from my main.js and just throw it into my users.js, everything works fine. This told me maybe I wasn't loading it properly into the index.html page, but it seems to me that I am.
index.html:
(scripts are at the bottom)
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="rantlyApp">
<header class='nav-header' role='navigation'>
<div class='content'>
<a class="navbar-brand" href="#/">Rantly</a>
<nav>
Rants
Users
Styleguide
Sign Up
</nav>
</div>
</header>
<div class="container">
<div ng-view=""></div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/users.js"></script>
<script src="scripts/controllers/about.js"></script>
</body>
</html>
I'm extremely new to Angular so it's quite possible I'm missing a fundamental step in setting up the controllers. Since my code works based purely off of which file I have it in, I have a feeling I'm not configuring something properly in Angular.
Any help is greatly appreciated. Thanks!
When you write
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
You are creating a new module called rantlyApp and removing any old module with the same name. So when the users.js script runs it overwrites what you defined in main.js.
Instead define your module once, and retrieve it with:
var rantlyApp = angular.module('rantlyApp');
Check the documentation.
Not new to programming. But I'm new to angularjs. So it's probably a daft question..
I've been following a tutorial...but for some reason the page routing doesn't work.
I have a nav bar on the top, home, about, contact etc. Typical stuff.
I would like to be able to click on "about" and be routed to the about.html file on the same page.
Nothing appears! The index.html is in a partials file. Please note I'm a newbie to angular and I've followed the instructions. My server works fine. The Nav bar looks good but doesn't link properly.
This is the code for index.html. Thanks
<!-- define angular app -->
<html ng-app="financeApp">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<img class="logo" src="img/logo.png" />
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- define angular controller -->
<div class="main" ng-controller="mainController">
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view> </div>
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</body>
</html>
and this is the code for script.js
// create the module and name it financeApp
// also include ngRoute for all our routing needs
var financeApp = angular.module('financeApp', ['ngRoute']);
// configure our routes
financeApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('#', {
templateUrl : 'partials/index.html',
controller : 'mainController'
})
// route for the about page
.when('#about', {
templateUrl : 'partials/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('#contact', {
templateUrl : 'partials/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
financeApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
financeApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
financeApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
The following should work for you.
You need to create partials/main.html
INDEX.HTML
<!DOCTYPE HTML>
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<!-- <img class="logo" src="img/logo.png" /> -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#/"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</div>
</header>
<body>
<div class="main" ng-controller="mainController">
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view></div>
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</div>
<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
SCRIPT.JS
var financeApp = angular.module('financeApp', ['ngRoute']);
// configure our routes
financeApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'partials/main.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'partials/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : 'contactController'
})
.otherwise({
redirectTo: '/'
})
});
// create the controller and inject Angular's $scope
financeApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
financeApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
financeApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
I guess you followed this tutorial and at least it explains everything what you need.
Possible errors could be:
Wrong folder name -> check again if the templateURLs match your file system
Errors in the template files
If you provide us some error messages from the console, we can help you better.