لا مشكلة اخي هذاا ال index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="photoGraphyApp">
<head>
<!-- meta tags -->
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- meta tags -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- title -->
<title>Hesham Shawky</title>
<!-- title -->
<!-- syles -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Color theme -->
<link rel="stylesheet" href="assets/css/color-theme/red-theme.css">
<!-- syles -->
</head>
<body>
<!-- Start All Site -->
<div class="all">
<div class="container-fluid">
<div class="row">
<div class="col-sm-1">
<aside class="navi">
<ul>
<li><a href="#/"><i class="fa fa-user"></i></a></li>
<li><a href="#/resume"><i class="fa fa-file"></i></a></li>
<li><a href="#/portfolio"><i class="fa fa-paint-brush"></i></a></li>
<li><a href="#/testimonial"><i class="fa fa-quote-left"></i><i class="fa fa-quote-right"></i></a></li>
<li><a href="#contact"><i class="fa fa-envelope"></i></a></li>
</ul>
</aside>
</div>
<div class="col-sm-11">
<ng-view></ng-view>
</div>
</div>
</div>
</div>
<!-- End All Site -->
<!-- JavaScript Files -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="assets/js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- AngularJs -->
<script src="assets/js/angular.min.js"></script>
<!-- AngularJs Route lib -->
<script src="assets/js/angular-route.min.js"></script>
<!-- photoGraphyApp -->
<script src="app/app.js"></script>
<!-- Custom routing Js file -->
<script src="app/routing/route.js"></script>
<!-- Custom JS File -->
<script src="assets/js/script.js"></script>
<script src="app/controllers/test.js"></script>
<!-- JavaScript Files -->
</body>
</html>
وهذا الroute
var app = angular.module('photoGraphyApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
"use strict";
$routeProvider
.when('/', {
controller: 'HomeCtrl',
templateUrl: 'app/views/home.html'
})
.when('/resume', {
controller: 'ResumeCtrl',
templateUrl: 'app/views/resume.html'
})
.otherwise({redirectTo: '/'});
});
وهذاا ملف ال view الي بعملو route...... اي كود جافاسكربت اريدة ان يوثر في هذاا الview لايعمل
<!-- Resume section Start -->
<section class="resume" id="resume" data-ng-controller="ResumeCtrl">
<!-- Section title -->
<h2 class="title">
<i class="fa fa-file"></i><br>
resume
</h2>
<!-- Quotation -->
<h3 class="text-center">
who makes no mistakes makes nothing.
</h3>
<!-- Resume (Emmplo&Educ) -->
<div class="exper-edu">
<div class="col-sm-7">
<!-- Employment start -->
<h3><i class="fa fa-suitcase"></i>Employment</h3>
<ul class="timeline">
<li>
<div class="timeline-badge info"><i class="fa fa-suitcase"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Full Stack Developer <span>|</span> RootCave</h4>
<h5>February 2016 - Present</h5>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, virtute feugiat in est. Et viris quodsi reprehendunt nec, sensibus intellegat dissentias at nec. Mei et electram partiendo, et cum esse reprimique.</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge info"><i class="fa fa-suitcase"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Front End Developer <span>|</span> ingraph.me</h4>
<h5>October 2015 - January 2016</h5>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, virtute feugiat in est. Et viris quodsi reprehendunt nec, sensibus intellegat dissentias at nec. Mei et electram partiendo, et cum esse reprimique.</p>
</div>
</div>
</li>
</ul>
<!-- Employment end -->
<!-- Education start -->
<h3><i class="fa fa-book"></i>Education</h3>
<ul class="timeline">
<li>
<div class="timeline-badge info"><i class="fa fa-book"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Factually Of Commerce <span>|</span> Cairo University</h4>
<h5>2012 - 2017(expected)</h5>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, virtute feugiat in est. Et viris quodsi reprehendunt nec, sensibus intellegat dissentias at nec. Mei et electram partiendo, et cum esse reprimique.</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge info"><i class="fa fa-book"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Web Programing <span>|</span> Self Learning</h4>
<h5>2009 - Present</h5>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, virtute feugiat in est. Et viris quodsi reprehendunt nec, sensibus intellegat dissentias at nec. Mei et electram partiendo, et cum esse reprimique.</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge info"><i class="fa fa-book"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">SoftWare Engineer <span>|</span> OXFord University</h4>
<h5>2013 - 2018(expected)</h5>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, virtute feugiat in est. Et viris quodsi reprehendunt nec, sensibus intellegat dissentias at nec. Mei et electram partiendo, et cum esse reprimique.</p>
</div>
</div>
</li>
</ul>
<!-- Education End -->
</div>
<!-- Skills Rating -->
<div class="col-sm-5">
<aside class="resume-aside">
<!-- Skills -->
<h3><i class="fa fa-star"></i>Skills</h3>
<ul class="skills">
<li>
<h4><i class="fa fa-dot-circle-o"></i>Photoshop</h4>
<div class="rating" data-rat="4"></div>
</li>
<li>
<h4><i class="fa fa-dot-circle-o"></i>Indesign</h4>
<div class="rating" data-rat="6"></div>
</li>
<li>
<h4><i class="fa fa-dot-circle-o"></i>Illustrator</h4>
<div class="rating" data-rat="5"></div>
</li>
<li>
<h4><i class="fa fa-dot-circle-o"></i>Flash</h4>
<div class="rating" data-rat="3"></div>
</li>
<li>
<h4><i class="fa fa-dot-circle-o"></i>Corel Draw</h4>
<div class="rating" data-rat="5"></div>
</li>
<li>
<h4><i class="fa fa-dot-circle-o"></i>Cinema4D</h4>
<div class="rating" data-rat="4"></div>
</li>
</ul>
<!-- hobbies -->
<h3><i class="fa fa-star"></i>Hobbies</h3>
<ul class="hobbies">
<li><img class="img-responsive" src="assets/images/hobbies/1.png" alt="..."></li>
<li><img class="img-responsive" src="assets/images/hobbies/2.png" alt="..."></li>
<li><img class="img-responsive" src="assets/images/hobbies/3.png" alt="..."></li>
<li><img class="img-responsive" src="assets/images/hobbies/4.png" alt="..."></li>
<li><img class="img-responsive" src="assets/images/hobbies/5.png" alt="..."></li>
<li><img class="img-responsive" src="assets/images/hobbies/6.png" alt="..."></li>
</ul>
<!-- Download Resume -->
<a href="#" class="btn black">Download Resume</a>
</aside>
</div>
</div>
</section>
<!-- Resume section End -->
وهذا ملف script.js
$(".skills li .rating").each(function (index, e) {
// Vars
var
$ratNum = 7,
$rat = $(e).attr("data-rat"),
$point = "<span></span>";
// Append points
while ($ratNum > 0) {
$(e).append($point);
$ratNum--;
}
$(e).find("span").each(function (index, e) {
if (index >= $rat)
return false;
// Append Disabled Rats
$(e).animate({
opacity: 1
});
});
});
استخدم angularJs أصدار 1.5 لا توجد أي اخطاء js في الconsole
ملحوظة الجافاسكربت تعمل في حالة ان كان الelement داخل الindex أي خارج الview